Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3

prof3ssorSt3v3/App-1.js

Created September 14, 2023 01:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save prof3ssorSt3v3/ca3d6d65879efa2e1ffaf329f6ef1096 to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/ca3d6d65879efa2e1ffaf329f6ef1096 to your computer and use it in GitHub Desktop.
Download ZIP
React Native Layout Samples
Raw
App-1.js
import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<SafeAreaProvider>
<SafeAreaView style={styles.container}>
<View style={[styles.box, styles.red]}>
<Text style={styles.txt}>1</Text>
</View>
<View style={[styles.box, styles.green]}>
<Text style={styles.txt}>2</Text>
</View>
<View style={[styles.box, styles.blue]}>
<Text style={styles.txt}>3</Text>
</View>
</SafeAreaView>
</SafeAreaProvider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: 'white',
},
box: {
flex: 1,
},
red: {
color: 'hsl(0, 50%, 20%)',
backgroundColor: 'hsl(0, 50%, 70%)',
},
green: {
color: 'hsl(100, 50%, 20%)',
backgroundColor: 'hsl(100, 50%, 70%)',
},
blue: {
color: 'hsl(220, 50%, 20%)',
backgroundColor: 'hsl(220, 50%, 70%)',
},
yellow: {
color: 'hsl(60, 50%, 20%)',
backgroundColor: 'hsl(60, 50%, 70%)',
},
txt: {
fontSize: 30,
textAlign: 'center',
},
});
Raw
App-2.js
import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<SafeAreaProvider>
<SafeAreaView style={styles.container}>
<View style={[styles.box, styles.red]}>
<Text style={styles.txt}>1</Text>
</View>
<View style={[styles.box, styles.green]}>
<Text style={styles.txt}>2</Text>
</View>
<View style={[styles.box, styles.blue]}>
<Text style={styles.txt}>3</Text>
</View>
</SafeAreaView>
</SafeAreaProvider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: 'white',
},
box: {
flex: 1,
},
red: {
flex: 1,
color: 'hsl(0, 50%, 20%)',
backgroundColor: 'hsl(0, 50%, 70%)',
},
green: {
flex: 2,
color: 'hsl(100, 50%, 20%)',
backgroundColor: 'hsl(100, 50%, 70%)',
},
blue: {
flex: 3,
color: 'hsl(220, 50%, 20%)',
backgroundColor: 'hsl(220, 50%, 70%)',
},
yellow: {
color: 'hsl(60, 50%, 20%)',
backgroundColor: 'hsl(60, 50%, 70%)',
},
txt: {
fontSize: 30,
textAlign: 'center',
},
});
Raw
App-3.js
import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<SafeAreaProvider>
<SafeAreaView style={styles.container}>
<View style={styles.row}>
<View style={[styles.box, styles.red]}>
<Text style={styles.txt}>1</Text>
</View>
<View style={[styles.box, styles.green]}>
<Text style={styles.txt}>2</Text>
</View>
</View>
<View style={styles.row}>
<View style={[styles.box, styles.blue]}>
<Text style={styles.txt}>3</Text>
</View>
<View style={[styles.box, styles.yellow]}>
<Text style={styles.txt}>4</Text>
</View>
</View>
</SafeAreaView>
</SafeAreaProvider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: 'white',
},
row: {
flex: 1,
flexDirection: 'row',
},
box: {
flex: 1,
justifyContent: 'center',
},
red: {
flex: 1,
color: 'hsl(0, 50%, 20%)',
backgroundColor: 'hsl(0, 50%, 70%)',
},
green: {
flex: 1,
color: 'hsl(100, 50%, 20%)',
backgroundColor: 'hsl(100, 50%, 70%)',
},
blue: {
flex: 1,
color: 'hsl(220, 50%, 20%)',
backgroundColor: 'hsl(220, 50%, 70%)',
},
yellow: {
color: 'hsl(60, 50%, 20%)',
backgroundColor: 'hsl(60, 50%, 70%)',
},
txt: {
fontSize: 30,
textAlign: 'center',
},
});
Raw
App-4.js
import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<SafeAreaProvider>
<SafeAreaView style={styles.container}>
<View style={styles.row}>
<View style={[styles.box, styles.red]}>
<Text style={styles.txt}>1</Text>
</View>
</View>
<View style={[styles.row, { flex: 2 }]}>
<View style={[styles.box, styles.green]}>
<Text style={styles.txt}>2</Text>
</View>
<View style={[styles.box, styles.blue]}>
<Text style={styles.txt}>3</Text>
</View>
<View style={[styles.box, styles.yellow]}>
<Text style={styles.txt}>4</Text>
</View>
</View>
</SafeAreaView>
</SafeAreaProvider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: 'white',
},
row: {
flex: 1,
flexDirection: 'row',
},
box: {
flex: 1,
justifyContent: 'flex-start',
},
red: {
flex: 1,
color: 'hsl(0, 50%, 20%)',
backgroundColor: 'hsl(0, 50%, 70%)',
},
green: {
flex: 1,
color: 'hsl(100, 50%, 20%)',
backgroundColor: 'hsl(100, 50%, 70%)',
},
blue: {
flex: 1,
color: 'hsl(220, 50%, 20%)',
backgroundColor: 'hsl(220, 50%, 70%)',
},
yellow: {
color: 'hsl(60, 50%, 20%)',
backgroundColor: 'hsl(60, 50%, 70%)',
},
txt: {
fontSize: 30,
textAlign: 'center',
},
});
Raw
App-5.js
import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<SafeAreaProvider>
<SafeAreaView style={styles.container}>
<View style={styles.row}>
<View style={[styles.box, styles.red]}>
<Text style={styles.txt}>1</Text>
</View>
</View>
<View style={styles.row}>
<View style={[styles.box, styles.green]}>
<Text style={styles.txt}>2</Text>
</View>
<View style={styles.box}>
<View style={[styles.box, styles.blue]}>
<Text style={styles.txt}>3</Text>
</View>
<View style={[styles.box, styles.yellow]}>
<Text style={styles.txt}>4</Text>
</View>
</View>
</View>
</SafeAreaView>
</SafeAreaProvider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: 'white',
},
row: {
flex: 1,
flexDirection: 'row',
},
box: {
flex: 1,
justifyContent: 'center',
},
red: {
flex: 1,
color: 'hsl(0, 50%, 20%)',
backgroundColor: 'hsl(0, 50%, 70%)',
},
green: {
flex: 1,
color: 'hsl(100, 50%, 20%)',
backgroundColor: 'hsl(100, 50%, 70%)',
},
blue: {
flex: 1,
color: 'hsl(220, 50%, 20%)',
backgroundColor: 'hsl(220, 50%, 70%)',
},
yellow: {
color: 'hsl(60, 50%, 20%)',
backgroundColor: 'hsl(60, 50%, 70%)',
},
txt: {
fontSize: 30,
textAlign: 'center',
},
});
Raw
App-6.js
import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<SafeAreaProvider>
<SafeAreaView style={styles.container}>
<View style={styles.row}>
<View style={[styles.box, styles.red]}>
<Text style={styles.txt}>1</Text>
</View>
<View style={[styles.box, styles.green]}>
<Text style={styles.txt}>2</Text>
</View>
</View>
<View style={styles.row}>
<View style={[styles.box, styles.blue]}>
<Text style={styles.txt}>3</Text>
</View>
<View style={[styles.box, styles.yellow]}>
<Text style={styles.txt}>4</Text>
</View>
</View>
</SafeAreaView>
</SafeAreaProvider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: 'white',
},
row: {
flex: 1,
flexDirection: 'row',
},
box: {
flex: 1,
justifyContent: 'center',
margin: 20,
},
red: {
flex: 1,
color: 'hsl(0, 50%, 20%)',
backgroundColor: 'hsl(0, 50%, 70%)',
},
green: {
flex: 1,
color: 'hsl(100, 50%, 20%)',
backgroundColor: 'hsl(100, 50%, 70%)',
},
blue: {
flex: 1,
color: 'hsl(220, 50%, 20%)',
backgroundColor: 'hsl(220, 50%, 70%)',
},
yellow: {
color: 'hsl(60, 50%, 20%)',
backgroundColor: 'hsl(60, 50%, 70%)',
},
txt: {
fontSize: 30,
textAlign: 'center',
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment