react-native-simple-view

react-native-simple-view

Installation

npm install react-native-simple-view

Usage

import { View, Text } from 'react-native-simple-view';

// ...
<View
  onPress={() => console.warn('press')}
  radius-50
  bg-pink
  padding-10
  center
  margin-10
>
  <Text size-50 color-blue bold>
    test
  </Text>
</View>;

Available View Props

name	default	description
row	false	row flex direction
wrap	false	wrap content
center	false	center content vertically and horizontally
spread	false	spread content across main axis
right	false	align content to the right
left	false	align content to the left
top	false	align content to the top
bottom	false	align content to the bottom
safe	false	the view is wrapped with SafeAreaView
onPress	null	on press event
padding-{number}	0	view padding
margin-{number}	0	view margin
radius-{number}	0	view radius

Available Text Props

name	default	description
bold	false	text boldness
size-{number}	null	font size
color-{color}	null	text color

Theme Provider

to setup default props for your View Wrap your root component in the

import { ThemeProvider, themes } from 'react-native-simple-view';

const mytheme = {
    ...themes.light,
    colors: {
      ...themes.light.colors,
      primary: 'white',
      secondary: 'black',
      text: 'white',
      bg: 'black',
    },
    layout: {
        padding: 5,
        radius: 15,
    },
}

<ThemeProvider theme={mytheme}>
    <App/>
</ThemeProvider>

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT