React Native – Android Fragment

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. In this post, you will see How to Make a View Like Android Fragment in React Native.

App.js

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Screen1 from './pages/Screen1';
import Screen2 from './pages/Screen2';
import Screen3 from './pages/Screen3';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { val: 1 };
  }
  renderElement() {
    //You can add N number of Views here in if-else condition
    if (this.state.val === 1) {
      //Return the Screen1 as a child to set in Parent View
      return <Screen1 />;
    } else if (this.state.val === 2) {
      //Return the Screen2 as a child to set in Parent View
      return <Screen2 />;
    } else {
      //Return the Screen3 as a child to set in Parent View
      return <Screen3 />;
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <View style={{ flexDirection: 'row' }}>
          {/*To set the FirstScreen*/}
          <TouchableOpacity
            style={styles.button}
            onPress={() => this.setState({ val: 1 })}>
            <Text style={{ color: '#ffffff' }}>1st View</Text>
          </TouchableOpacity>
          {/*To set the SecondScreen*/}
          <TouchableOpacity
            style={styles.button}
            onPress={() => this.setState({ val: 2 })}>
            <Text style={{ color: '#ffffff' }}>2nd View</Text>
          </TouchableOpacity>
          {/*To set the ThirdScreen*/}
          <TouchableOpacity
            style={styles.button}
            onPress={() => this.setState({ val: 3 })}>
            <Text style={{ color: '#ffffff' }}>3rd View</Text>
          </TouchableOpacity>
        </View>

        {/*Text From Parent Screen*/}
        <Text style={styles.paragraph}>
          Example of view like fragment in React Native
        </Text>

        {/*View to hold the child screens 
        which can be changed on the click of a button*/}
        <View style={{ backgroundColor: '#ffffff' }}>
          {this.renderElement()}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ecf0f1',
    padding: 8,
    marginTop: 30,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  button: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#808080',
    padding: 10,
    margin: 2,
  },
});

Screen1.js

import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';

export default class Screen1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = { valx: 0 };
    // you can define N number of key value paires like JSON.
    this.t = setInterval(() => {
      this.setState({ valx: this.state.valx + 1 });
    }, 1000);
    // Simple interval fundtion which will run in every second.
    // It will increase valx
  }
  componentWillUnmount () {
    clearTimeout(this.t);
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>Content Loaded from First Screen</Text>
        <Text style={styles.paragraph}>{'Timer: ' + this.state.valx}</Text>
        <Image
          style={styles.logo}
          source={{        uri:'ccc',
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
  },
  paragraph: {
    margin: 24,
    marginTop: 0,
    fontSize: 14,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  logo: {
    height: 50,
    width: 50,
  },
});

Screen2.js

import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';

export default class Screen2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = { valx: 0 };
    // you can define N number of key value paires like JSON.
    this.t = setInterval(() => {
      this.setState({ valx: this.state.valx + 1 });
    }, 1000);
    // Simple interval fundtion which will run in every second.
    // It will increase valx
  }
   componentWillUnmount () {
    clearTimeout(this.t);
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>Content Loaded from Screen2</Text>
        <Text style={styles.paragraph}>{'Timer: ' + this.state.valx}</Text>
        <Image
          style={styles.logo}
          source={{
uri:'ccc',
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
  },
  paragraph: {
    margin: 24,
    marginTop: 0,
    fontSize: 14,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  logo: {
    height: 50,
    width: 50,
  },
});

Screen3.js

import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';

export default class Screen3 extends React.Component {
  constructor(props) {
    super(props);
    this.state = { valx: 0 };
    // you can define N number of key value paires like JSON.
    this.t = setInterval(() => {
      this.setState({ valx: this.state.valx + 1 });
    }, 1000);
    // Simple interval fundtion which will run in every second.
    // It will increase valx
  }
  componentWillUnmount () {
    clearTimeout(this.t);
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>Content Loaded from Screen3</Text>
        <Text style={styles.paragraph}>{'Timer: ' + this.state.valx}</Text>
        <Image
          style={styles.logo}
          source={{
uri:'ccc',
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
  },
  paragraph: {
    margin: 24,
    marginTop: 0,
    fontSize: 14,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  logo: {
    height: 50,
    width: 50,
  },
});
0 0 votes
Article Rating

Learn React Native App available on play store Download Now.
Do you want to hire us for your Project Work? Then Contact US.
Spread the love
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x