Using createStackNavigator from @react-navigation/stack, unable to render a stackscreen

user_14701100 0
Viewed 237

Im using createStackNavigator from @react-navigation/stack and I'm trying to render a form page with Formik as one of my stackScreens, but it won't display the page. I'm getting no errors and I believe I have styled it correctly so I'm not sure how to proceed. The home page works so I know the methodology works.

StackNavigator.js

import * as React from 'react';
import { createStackNavigator } from '@react-navigation/stack';

import LinkScreen from "../screens/LinksScreen"
import HomeScreen from "../screens/HomeScreen"
import User from "../screens/User"
import Form from "../screens/Form"
import Info from "../screens/Info"

const Stack = createStackNavigator();

const HomeStackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name ="Home" component={HomeScreen} />
    </Stack.Navigator>
  )
}

// Settings page
const SettingStackNavigator = () => {
    return (
      <Stack.Navigator initialRouteName={'Settings'} >
        <Stack.Screen name="Settings" component={LinkScreen} />
        <Stack.Screen name="Profile" component={User} />
      </Stack.Navigator>
    );
  }

// Form Page
  const FormStackNavigator = () => {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Form" component={Form} />
      </Stack.Navigator>
    );
  }

  // Other page?
  const InfoStackNavigator = () => {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Info" component={Info} />
      </Stack.Navigator>
    );
  }

export { HomeStackNavigator, SettingStackNavigator, FormStackNavigator, InfoStackNavigator };

Form.js

import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Button, Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { ScrollView, TextInput } from 'react-native-gesture-handler';
import styles from'./screenStyles'
import {Formik} from 'formik'

export default function Form(){
    return(
        <View style={styles.container}>
            <Formik
                initialValues={{Test1: '', Test2: '', Test3:''}}
                onSubmit={(values)=>{
                    console.log(values);
                }}
            >
                {(props)=>{
                    <View style={styles.container}>
                        <TextInput
                            style={styles.input}
                            placeholder='Test1 Text'
                            onChangeText={props.handleChange('Test1')}
                            value={props.values.Test1}
                        />
                        <TextInput
                            style={styles.input}
                            placeholder='Test2 Text'
                            onChangeText={props.handleChange('Test2')}
                            value={props.values.Test2}
                        />
                        <TextInput
                            style={styles.input}
                            placeholder='Test3 Input'
                            onChangeText={props.handleChange('Test3')}
                            value={props.values.Test3}
                        />

                        <Button title='Submit' color='blue' onPress={props.handleSubmit}/>

                    </View>
                }}
            </Formik>
        </View>
    );
}

The form page just comes up with the form header but no content.

formik react-native reactjs javascript
1 Answers

As looking on to your provided snack you were passing formik properties in the right way but not returning that form so returning that form works.

here is the working code.

export default function Form(){
    return(
        <View style={styles.container}>
            <Formik
                initialValues={{Test1: '', Test2: '', Test3:''}}
                onSubmit={(values)=>{
                    console.log(values);
                }}
            >
                 {formikProps => ( // here you need to return your form
                    <View style={styles.container}>
                        <TextInput
                            style={styles.input}
                            placeholder='Test1 Text'
                            onChangeText={formikProps.handleChange('Test1')}
                            value={formikProps.values.Test1}
                        />
                        <TextInput
                            style={styles.input}
                            placeholder='Test2 Text'
                            onChangeText={formikProps.handleChange('Test2')}
                            value={formikProps.values.Test2}
                        />
                        <TextInput
                            style={styles.input}
                            placeholder='Test3 Input'
                            onChangeText={formikProps.handleChange('Test3')}
                            value={formikProps.values.Test3}
                        />

                        <Button title='Submit' color='blue' onPress={formikProps.handleSubmit}/>

                    </View>
                 )}
            </Formik>
        </View>
    );
}

Here is a link to working snack

user_77139200
Related