Fragment is very popular in Custom android app development where we would develop app using JAVA. In react naive there is no same component available like Fragment but using some tweak we can easily create Fragment like interface in react native. In a developer worlds fragment is like a Custom child view in single activity screen. There can be multiple fragments in single screen with multiple objectives. So in this tutorial we would React Native Create Android Like Fragment for Android iOS Example Tutorial.
Note: We are not using any custom component in current project. All the below code is purely created in React Native itself.
Contents in this project React Native Create Android Like Fragment for Android iOS Example Tutorial:
1. Import View, StyleSheet, Text, TouchableOpacity and Image Component in your react native project’s App.js file.
|
1 2 3 |
import React, { Component } from 'react'; import { View, StyleSheet, Text, TouchableOpacity, Image } from 'react-native'; |
2. Creating our main Export default App class extends with Component. This is our Main Root Parent Class.
|
1 2 3 4 |
export default class App extends Component { } |
3. Creating constructor() in our main class. Inside the constructor we would make a State variable named as defaultScreen with Value 1. This state is used to determine which Children Fragment you want to display on screen on app starting time. Here 1 means First Fragment.
|
1 2 3 4 5 6 7 8 |
constructor(props) { super(props); this.state = { defaultScreen: 1 }; } |
4. Creating a function named as renderFragment(). Inside the function we would put a nested If-Else condition and return View according to condition.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
renderFragment() { if (this.state.defaultScreen === 1) { return <ScreenFirst />; } else if (this.state.defaultScreen === 2) { return <ScreenSecond />; } else { return <ScreenThird />; } } |
5. Creating render’s return block and here we would 3 Touchable Opacity buttons and at the Bottom we would call the renderFragment() method . Each button is used to call a Child Fragment View which we would create in next steps.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
render() { return ( <View style={styles.MainContainer}> <View style={{ flexDirection: 'row' }}> <TouchableOpacity style={styles.button} onPress={() => this.setState({ defaultScreen: 1 })}> <Text style={{ color: '#ffffff' }}> View 1 </Text> </TouchableOpacity> <TouchableOpacity style={styles.button} onPress={() => this.setState({ defaultScreen: 2 })}> <Text style={{ color: '#ffffff' }}> View 2 </Text> </TouchableOpacity> <TouchableOpacity style={styles.button} onPress={() => this.setState({ defaultScreen: 3 })}> <Text style={{ color: '#ffffff' }}> View 3</Text> </TouchableOpacity> </View> <Text style={styles.text1}> Fragment in React Native </Text> <View style={{ backgroundColor: '#ffff' }}> {this.renderFragment()} </View> </View> ); } |
6. Complete code for our main Export default App class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
export default class App extends Component { constructor(props) { super(props); this.state = { defaultScreen: 1 }; } renderFragment() { if (this.state.defaultScreen === 1) { return <ScreenFirst />; } else if (this.state.defaultScreen === 2) { return <ScreenSecond />; } else { return <ScreenThird />; } } render() { return ( <View style={styles.MainContainer}> <View style={{ flexDirection: 'row' }}> <TouchableOpacity style={styles.button} onPress={() => this.setState({ defaultScreen: 1 })}> <Text style={{ color: '#ffffff' }}> View 1 </Text> </TouchableOpacity> <TouchableOpacity style={styles.button} onPress={() => this.setState({ defaultScreen: 2 })}> <Text style={{ color: '#ffffff' }}> View 2 </Text> </TouchableOpacity> <TouchableOpacity style={styles.button} onPress={() => this.setState({ defaultScreen: 3 })}> <Text style={{ color: '#ffffff' }}> View 3</Text> </TouchableOpacity> </View> <Text style={styles.text1}> Fragment in React Native </Text> <View style={{ backgroundColor: '#ffff' }}> {this.renderFragment()} </View> </View> ); } } |
7. Creating a class named as ScreenFirst. This is our First fragment View.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class ScreenFirst extends Component { render() { return ( <View style={styles.SubContainer}> <Text style={styles.text2}>First Fragment Screen</Text> <Image style={styles.image} source={{uri:'https://reactnativecode.com/wp-content/uploads/2017/06/sample_image.png', }} /> </View> ); } } |
8. Creating another class named as ScreenSecond. This would be our Second Fragment View.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class ScreenSecond extends Component { render() { return ( <View style={styles.SubContainer}> <Text style={styles.text2}>Second Fragment Screen</Text> <Image style={styles.image} source={{ uri:'https://reactnativecode.com/wp-content/uploads/2017/06/sample_image_new.png' }} /> </View> ); } } |
9. Creating another class named as ScreenThird. This would be our Third Fragment View.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
class ScreenThird extends Component { render() { return ( <View style={styles.SubContainer}> <Text style={styles.text2}>Third Fragment Screen</Text> <Image style={styles.image} source={{ uri:'https://reactnativecode.com/wp-content/uploads/2017/06/sample_image.png', }} /> </View> ); } } |
10. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, backgroundColor: '#ecf0f1', padding: 8, }, SubContainer: { justifyContent: 'center', alignItems: 'center', padding: 20, }, text1: { margin: 20, fontSize: 20, fontWeight: 'bold', textAlign: 'center', }, text2: { fontSize: 18, fontWeight: 'bold', textAlign: 'center', marginBottom: 10 }, button: { flex: 1, alignItems: 'center', backgroundColor: '#0091EA', padding: 10, margin: 3, fontSize: 18 }, image: { height: 100, width: 100, resizeMode: 'contain' }, }); |
11. Complete Source Code for App.js file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 |
import React, { Component } from 'react'; import { View, StyleSheet, Text, TouchableOpacity, Image } from 'react-native'; export default class App extends Component { constructor(props) { super(props); this.state = { defaultScreen: 1 }; } renderFragment() { if (this.state.defaultScreen === 1) { return <ScreenFirst />; } else if (this.state.defaultScreen === 2) { return <ScreenSecond />; } else { return <ScreenThird />; } } render() { return ( <View style={styles.MainContainer}> <View style={{ flexDirection: 'row' }}> <TouchableOpacity style={styles.button} onPress={() => this.setState({ defaultScreen: 1 })}> <Text style={{ color: '#ffffff' }}> View 1 </Text> </TouchableOpacity> <TouchableOpacity style={styles.button} onPress={() => this.setState({ defaultScreen: 2 })}> <Text style={{ color: '#ffffff' }}> View 2 </Text> </TouchableOpacity> <TouchableOpacity style={styles.button} onPress={() => this.setState({ defaultScreen: 3 })}> <Text style={{ color: '#ffffff' }}> View 3</Text> </TouchableOpacity> </View> <Text style={styles.text1}> Fragment in React Native </Text> <View style={{ backgroundColor: '#ffff' }}> {this.renderFragment()} </View> </View> ); } } class ScreenFirst extends Component { render() { return ( <View style={styles.SubContainer}> <Text style={styles.text2}>First Fragment Screen</Text> <Image style={styles.image} source={{uri:'https://reactnativecode.com/wp-content/uploads/2017/06/sample_image.png', }} /> </View> ); } } class ScreenSecond extends Component { render() { return ( <View style={styles.SubContainer}> <Text style={styles.text2}>Second Fragment Screen</Text> <Image style={styles.image} source={{ uri:'https://reactnativecode.com/wp-content/uploads/2017/06/sample_image_new.png' }} /> </View> ); } } class ScreenThird extends Component { render() { return ( <View style={styles.SubContainer}> <Text style={styles.text2}>Third Fragment Screen</Text> <Image style={styles.image} source={{ uri:'https://reactnativecode.com/wp-content/uploads/2017/06/sample_image.png', }} /> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, backgroundColor: '#ecf0f1', padding: 8, }, SubContainer: { justifyContent: 'center', alignItems: 'center', padding: 20, }, text1: { margin: 20, fontSize: 20, fontWeight: 'bold', textAlign: 'center', }, text2: { fontSize: 18, fontWeight: 'bold', textAlign: 'center', marginBottom: 10 }, button: { flex: 1, alignItems: 'center', backgroundColor: '#0091EA', padding: 10, margin: 3, fontSize: 18 }, image: { height: 100, width: 100, resizeMode: 'contain' }, }); |
Screenshots in Android device:
Screenshots in iOS device:
