I'm having a problem getting my React Navigation to actually transition screens. I've used it successfully before and I cannot figure out what my problem is this time. I click my button and no transition happens. I think it might be a problem with the inline onPress not running....does it have to be in Main Button? Or does the inline code on App.js override anything in MainButton.js.

Also...NarScreen is the screen I'm trying to get to.

FILE 1: App.js

import 'react-native-gesture-handler';
import React from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { color } from 'react-native-reanimated';
import MainButton from './components/MainButton';
import NarScreen from './screens/NarScreen.js'

function HomeScreen({ navigation }) {
  return(
      <View style={styles.background}>
        <View style={styles.logo}>
          <Image source={require('./components/HNS1.png')} style={styles.image} resizeMode='contain' />
        </View>
        <View style={styles.buttons}>
        <MainButton onPress={() => navigation.navigate('Nar')}>NAR Test</MainButton>
        <MainButton>Tripoli Test</MainButton>
        </View>
      </View>
   
  );
}

function Nar({ navigation }) {
  return(
   <NarScreen />
  )
}


const Stack = createStackNavigator();

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

}

const styles = StyleSheet.create({
  background: {
    backgroundColor: '#00629B',
    flex: 1,
  },
  buttons: {
    marginTop: "20%",
    marginLeft: 10,
  },
  image: {
    width: '80%',
    height: 300,
    borderRadius: 20,
  },
  logo: {
    borderRadius: 200,
    marginTop: '30%',
    alignItems: 'center'
  },
  });


  export default App;
  

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

File 2: NarScreen.js

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const NarScreen = props => {
    return(
        <View>
            <Text>BigScreen!</Text>
        </View>
    )
}
export default NarScreen;

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

FILE 3: MainButton.js

import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity, } from 'react-native';

const MainButton = props => {
    return <TouchableOpacity>
        <View style={styles.button}>
            <Text style={styles.buttonText}>{props.children}</Text>
        </View>
    </TouchableOpacity>
}

const styles = StyleSheet.create({
    button: {
        backgroundColor: "#FCD757",
        paddingVertical: 30,
        paddingHorizontal: 30,
        height: 100,
        width: 300,
        marginTop: "10%",
        borderRadius: 10,
        marginLeft: '12%',
        justifyContent: 'space-between',
        
    },
    buttonText: {
        color: 'black',
        fontSize: 26,
        textAlign: 'center',
        
    }

})

export default MainButton;

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Inside your MainButton.js file, you are not handling onPress event. Add it to touchable opacity.

const MainButton = props => {
    return <TouchableOpacity onPress={props.onPress}>
        <View style={styles.button}>
            <Text style={styles.buttonText}>{props.children}</Text>
        </View>
    </TouchableOpacity>
}