How to send text input onto a different screen by clicking a button in react native

JoeM
March 8, 2023
198 views
0 votes
2 Answers

I’m trying to develop an app that allows the user to input the title of a song on the screen ‘PostScreen’ and then when a button is clicked, see the title that they inputted on the home screen, called ‘TabOneScreen’. The problem is that it keeps saying that it ‘Cannot read property of ‘song’ of undefined’

This is the code for the screen ‘PostScreen’:

import { StatusBar } from 'expo-status-bar';
import { Platform, StyleSheet, TextInput, SafeAreaView, Pressable, Button } from 'react-native';
import { useState } from 'react';
import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';
import { useNavigation } from '@react-navigation/native';



export default function PostScreen({ navigation }: RootStackScreenProps<'Post'>) {
    const [song, setSong] = useState('song')
    const saveSong = () =>{
        navigation.navigate('Root', {
            song: song,
        });
    };

        return (
          <View style={styles.container}>
            <TextInput 
            style={styles.input}
            placeholder='Enter a Song' 
            onChangeText={(val) => setSong(val)}/>

            <Text> The song you will post is: {song}</Text>

            <Button
                title='Post Song'
                mode='contained'
                onPress={saveSong} />
          </View>
        );
      };

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    borderWidth: 1,
    borderColor: '#777',
    padding: 8,
    margin: 10,
    width: 200,
    color: 'blue',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: '80%',
  },
});

This is code for the screen ‘TabOneScreen’:

import { StyleSheet, Pressable } from 'react-native';
import { useState } from 'react';
import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';
import { RootTabScreenProps } from '../types';
import { useRoute } from '@react-navigation/native';

export default function TabOneScreen({ navigation }: RootTabScreenProps<'TabOne'>) {
  const route = useRoute();

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Me-Lody</Text>
      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
      <Text>Here is where you will find your friends' posts for the day</Text>
      <View style={styles.serparator} lightColor='#eee' carkColor="rgba(255,255,255,0.1)" />
      <Pressable onPress={() => navigation.replace('Post')} 
      style={styles.link}> 
      <Text> Click me to post a song!</Text></Pressable>
      <Text style={{ fontSize: 20}}> The song you recently posted is: {route.params.song}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: '80%',
  },
  link: {
    borderWidth: 1,
    borderColor: '#777',
    padding: 8,
    margin: 10,
    width: 200,
    color: 'blue',
  }
});

Answers

I will share my working version

This is the code for App.tsx (which contains the createStackNavigator)

import 'react-native-gesture-handler';
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import PostScreen from "./src/screens/PostScreen";
import TabOneScreen from "./src/screens/TabOneScreen";
import { NavigationType } from "./src/types/NavigationTypes";

const Stack = createStackNavigator<NavigationType>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="PostScreen" component={PostScreen} />
        <Stack.Screen name="TabOneScreen" component={TabOneScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import PostScreen from "./src/screens/PostScreen";
import TabOneScreen from "./src/screens/TabOneScreen";
import { NavigationType } from "./src/types/NavigationTypes";

const Stack = createStackNavigator<NavigationType>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="PostScreen" component={PostScreen} />
        <Stack.Screen name="TabOneScreen" component={TabOneScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Below is the code for types used in this project

import { StackScreenProps } from "@react-navigation/stack";

export type NavigationType = {
  PostScreen: undefined;
  TabOneScreen: { song: string };
};

export type PostScreenProps = StackScreenProps<NavigationType, "PostScreen">;

export type TabOneScreenProps = StackScreenProps<
  NavigationType,
  "TabOneScreen"
>;

Below is the code for PostScreen.tsx

import { StatusBar } from "expo-status-bar";
import {
  Platform,
  StyleSheet,
  TextInput,
  SafeAreaView,
  Pressable,
  Button,
  View,
  Text,
} from "react-native";
import { useState } from "react";
// import EditScreenInfo from '../components/EditScreenInfo';
// import { Text, View } from '../components/Themed';
import { useNavigation } from "@react-navigation/native";
import { PostScreenProps } from "../types/NavigationTypes";

export default function PostScreen({ navigation }: PostScreenProps) {
  const [song, setSong] = useState("song");
  const saveSong = () => {
    navigation.navigate("TabOneScreen", { song });
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Enter a Song"
        onChangeText={(val) => setSong(val)}
      />

      <Text> The song you will post is: {song}</Text>

      <Button title="Post Song" onPress={saveSong} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  input: {
    borderWidth: 1,
    borderColor: "#777",
    padding: 8,
    margin: 10,
    width: 200,
    color: "blue",
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: "80%",
  },
});

Below is the code for TabOneScreen.tsx

import { StyleSheet, Pressable, View, Text } from "react-native";
import { useState } from "react";
import { TabOneScreenProps } from "../types/NavigationTypes";

export default function TabOneScreen({ navigation, route }: TabOneScreenProps) {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Me-Lody</Text>
      <View style={styles.separator} />
      <Text>Here is where you will find your friends' posts for the day</Text>
      <View style={styles.separator} />
      <Pressable
        onPress={() => navigation.replace("PostScreen")}
        style={styles.link}
      >
        <Text> Click me to post a song!</Text>
      </Pressable>
      <Text style={{ fontSize: 20 }}>
        {" "}
        The song you recently posted is: {route.params.song}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: "80%",
  },
  link: {
    borderWidth: 1,
    borderColor: "#777",
    padding: 8,
    margin: 10,
    width: 200,
    color: "blue",
  },
});

Please Try this out.

here is the full code maybe this will help you!

App.js

import * as React from 'react';
import { Button, View, Text, TextInput } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  const [text, onChangeText] = React.useState('');

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>

      <TextInput
        style={{
          height: 40,
          margin: 12,
          borderWidth: 1,
          padding: 10,
        }}
        onChangeText={onChangeText}
        value={text}
      />
      <Button
        title="Go to Details"
        onPress={() =>
          navigation.navigate('Details', {
            name: text,
            otherParam: 'anything you want here',
          })
        }
      />
    </View>
  );
}

function DetailsScreen({ route }) {
  const { name } = route.params;

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Text>{name}</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Please signup or login to give your own answer.

Click here to cancel reply.