import { View, Text } from 'react-native' import { createStyles } from 'responsive-react-native' import { Header } from './components.js' import { Breakpoint } from './breakpoint.js' const styles = createStyles({ wrapper: { gap: 10, paddingHorizontal: 20 }, header: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }, title: { fontSize: 20, fontWeight: 'bold' }, box: { display: 'flex', justifyContent: 'center', alignItems: 'center', padding: 10, backgroundColor: 'lightgray', width: 100, height: 100 }, }) export default function Screen({ width }) { return ( <View style={styles.wrapper}> <Header /> <Text>Width: {width}</Text> <View style={[styles.box, styles.smallBox]}> <Text>100x100</Text> </View> <Breakpoint /> </View> ) }
1179 x 2556 · 6.1"
393 x 852 @3x
When a function is passed and MobX is installed the styles will automatically adapt whenever any of the state accessed inside changes.