@vko-online/react-native-flex-view v2.0.2

View

Accept inline style props with view props

Using styles const is annoying, specially for simple task

<View style={styles.container}>
  <Text>pets</Text>
</View>
const styles = StyleSheet.create({
  container: {
    paddingLeft: 10
  }
})

What if we could pass styles and props as direct property

<View paddingLeft={10} onLayout={handleLayout}>
  <Text>pets</Text>
</View>

installation

npm install react-native-flex-view

usage

Add style and view props to view

import View from 'view-on-steroids'

// accepts ViewStyleProps and ViewProps as props
<View backgroundColor='red'>
  children
</View>

// Align horizontally
<View horizontal padding={10}>any children</View>

// Align vertically
<View vertical>any children</View>

examples

import View from 'react-native-flex-view'

// simple pane
const demo1 = (
  <View padding={10} backgroundColor='red' onTouchStart={() => false>
    <Text>My text</Text>
  </View>
)

// horizontal
const demo2 = (
  <View horizontal alignItems='center' onTouchStart={() => false>
    <Text>h</Text>
    <Text>o</Text>
    <Text>r</Text>
    <Text>i</Text>
    <Text>z</Text>
    <Text>o</Text>
    <Text>n</Text>
    <Text>t</Text>
    <Text>a</Text>
    <Text>l</Text>
  </View>
)

// vertical
const demo3 = (
  <View vertical paddingLeft={10}>
    <Text>v</Text>
    <Text>e</Text>
    <Text>r</Text>
    <Text>t</Text>
    <Text>i</Text>
    <Text>c</Text>
    <Text>a</Text>
    <Text>l</Text>
  </View>
)