How to send value from one tab to another tab in react native

Question

Here in my code I am making tree tabs , on first tabe there are two input fields and buttons. Now after entering the value in input and on button click i have to send vale to oter tabs. Like in in name field I am entering name "Abhi" and on button click this Abhi should reflect on Tab 2. Same like in Animal field , this Animal should reflect on third tab . Please help

 import * as React from 'react';
    import { View, StyleSheet, Dimensions,Text,TextInput,TouchableOpacity } from 'react-native';
    import { TabView, SceneMap } from 'react-native-tab-view';
     
    const FirstRoute = () => (
      <View style={[styles.scene, { backgroundColor: '#FFFFFF' }]} >
        <View  style={{}}>
        <Text style={{margin:15}}>Name </Text>
        <TextInput style={styles.input}
                   underlineColorAndroid = "transparent"
                   placeholder = "Name"
                   placeholderTextColor = "#9a73ef"
                   autoCapitalize = "none"
                   onChangeText={text => onChangeText(text)}
                  />
        <TouchableOpacity
                   style = {styles.submitButton}
                   onPress = {
                      () => this.Name()
                   }>
                   <Text style = {styles.submitButtonText}> Submit </Text>
                </TouchableOpacity>
                </View>
    
                <View style={{}}>
        <Text style={{margin:15}}> Favorite Animal  </Text>
        <TextInput style={styles.input}
                   underlineColorAndroid = "transparent"
                   placeholder = "Favorite Animal"
                   placeholderTextColor = "#9a73ef"
                   autoCapitalize = "none"
                   onChangeText={text => onChangeText(text)}
                  />
        <TouchableOpacity
                   style = {styles.submitButton}
                   onPress = {
                      () => this.Animal()
                   }>
                   <Text style = {styles.submitButtonText}> Submit </Text>
                </TouchableOpacity>
                </View>
    
      </View>
    );
     
    const SecondRoute = () => (
      <View style={[styles.scene, { backgroundColor: '#FFFFFF' }]} >
    <Text> {'Name' }</Text>
    </View>
    );
     
    const ThirdRoute = () => (
      <View style={[styles.scene, { backgroundColor: '#FFFFFF' }]} >
        <Text> {"Favorite Animal "}</Text>
      </View>
    );
    
    const initialLayout = { width: Dimensions.get('window').width };
     
    export default function TabViewExample() {
      const [index, setIndex] = React.useState(0);
      const [routes] = React.useState([
        { key: 'first', title: 'First' },
        { key: 'second', title: 'Second' },
        { key: 'third', title: 'Third' },
      ]);
     
      const renderScene = SceneMap({
        first: FirstRoute,
        second: SecondRoute,
        third:ThirdRoute
      });
     
      return (
        <TabView
          navigationState={{ index, routes }}
          renderScene={renderScene}
          onIndexChange={setIndex}
          initialLayout={initialLayout}
        />
      );
    }
     
    const styles = StyleSheet.create({
      scene: {
        flex: 1,
      },
      container: {
        paddingTop: 23
     },
     input: {
        margin: 15,
        height: 40,
        borderColor: '#7a42f4',
        borderWidth: 1
     },
     submitButton: {
        backgroundColor: '#65D370',
        padding: 10,
        margin: 15,
        height: 40,
     },
     submitButtonText:{
        color: 'white',
        alignSelf:'center',
        justifyContent:'center',
        borderRadius:20
    
      
     }
    });

score 0 · Answer 1 · answered Aug 13 '20 at 22:33

Shortest answer, is try to use a state. Using states and passing the state from parent to child may be your best option. Here is one way you can go about it.

1st in your TabViewExample add a useState() hook to keep the form data and change your renderScene() to a function, do not use SceneMap. Example:

...
    const [name, setName] = React.useState(undefined);
      
        const renderScene = ({ route }) => {
          switch (route.key) {
            case "first":
              return <FirstRoute setName={setName} />;
            case "second":
              return <SecondRoute name={name} />;
            case "third":
              return <ThirdRoute />;
            default:
              <FirstRoute setName={setName} />;
          }
        };

(A) The reason for using renderScene() as function is explained with more detail on the "react-native-tab-view" documentation. In short when you need to pass props to components you should not use SceneMap() which you are using above instead turn renderScene into a function and use switch.

(B) We only passed setName to the first component because that's what we'll be using.

2nd - Make use of the props in your components. So now they'll look more or less like this:

    const FirstRoute = props => (
       <View style={[styles.scene, { backgroundColor: "#FFFFFF" }]}>                                                                                   
         <View style={{}}>
           <Text style={{ margin: 15 }}>Name </Text>
           <TextInput
             style={styles.input}
             underlineColorAndroid="transparent"
             placeholder="Name"
             placeholderTextColor="#9a73ef"
             autoCapitalize="none"
             onChangeText={text => props.setName(text)}
           />
...

And for the SecondRoute :

const SecondRoute = props => (
   <View style={[styles.scene, { backgroundColor: "#FFFFFF" }]}>
     <Text> {props.name}</Text>
   </View>
 );

So now when you change the first Input in FirstRoute, the name state will automatically be updated, so when you go/swipe to page 2, you should see whatever you typed on the first TextInput on page 1.

PS: this is just a brief explanation so I just gave you the essential idea behind sharing data across tabs/components. On your code you can create cleaner form handler functions and handler functions for those buttons. I could've done it, but I'll leave that job for you as it was not part of your initial question. Hope this helps and let me know if you need a more detailed/in-depth response.

PS 2: If you use my current example don't click the buttons otherwise you'll get errors because you have no handler function, just type on the input and go to the second page to see the result.

How to send value from one tab to another tab in react native

1 Answers1