I have one button which is redirect to anothe page called SELECT_COMPANY_SCREEN.only i need to redirect to this page.
import { SELECT_COMPANY_SCREEN } from "../../constants/screen-names";
const SettingsCompanyCard = ({ navigation }) => {
<Button
onPress={() => navigation.navigate("SELECT_COMPANY_SCREEN")}
title="go to Company"
/>
}
export default SettingsCompanyCard;
but i am facing issues like below.
How can i resolve this issue?
I think I had the same issue a while ago.
If your SteeingsComapnyCard component isn't the component you set as component in your Screen-component, you can pass the prop navigation from its parent:
When defining, just do <SettingsCompanyCard navigation={navigation} />
use props.
const SettingsCompanyCard = (props) => {
<Button
onPress={() => props.navigation.navigate("SELECT_COMPANY_SCREEN")}
title="go to Company"
/>
}
You can use this.props.navigation.navigate('Your screename')
Related
I have this problem with ios but not with android. It only disturb the add task input the task edit and the list name edit. The input addList(It's the one with "What to do?" on the draw) in the header works fine.
UI drawing
Achitecture of components
I console log my component and I can see it rerender everytime I add a letter in the input field.
I checked on google and follow this:(can we link other website here?) https://www.codegrepper.com/code-examples/javascript/react+native+textinput+lost+focus+after+charter+type
Tried the the first solution with onBlurr and onFocus.
I tried to make a TextInput component for add task.
I even try with my component addList but it didn't solve the problem.
Anyone have faced this problem before? Is there anyway to by pass this?
My code without the import/style look like this:
const TaskList: FunctionComponent<TasksListProps> = ({
addTask,
deleteTask,
toggleTask,
editTaskName,
...props
}) => {
console.log('props', props);
const [nameOfTask, setNameOfTask] = useState('');
console.log('name', nameOfTask);
const textHandler = (enteredName: string) => {
setNameOfTask(enteredName);
};
const handleSubmitTask = () => {
if (nameOfTask === '') {
return;
}
addTask(props.listId, nameOfTask);
setNameOfTask('');
};
return (
<View style={styles.tasksListContainer}>
{props.tasks.map(task => (
<SingleTask
key={task.id}
task={task}
listId={props.listId}
deleteTask={deleteTask}
toggleTask={toggleTask}
editTaskName={editTaskName}
/>
))}
<View style={styles.taskInputContainer}>
<TextInput
style={styles.tasksTextInput}
value={nameOfTask}
onChangeText={textHandler}
placeholder="Write a task to do"
/>
<TouchableOpacity onPress={handleSubmitTask}>
<Image source={require('./Img/add-button.png')} />
</TouchableOpacity>
</View>
</View>
);
};
You can create a HOC and wrap your screen width DismissKeyboard
import { Keyboard } from 'react-native';
const DismissKeyboard = ({ children }) => (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
{children}
</TouchableWithoutFeedback>
);
That because Re render.
Try to make the input with the main component of the page to test it.
Then check where the error with re-render
I'm attempting to pass a 'passcode' state as params in my React Native app.
I'm doing this by passing params into a 'navigation.navigate' call.
However, every time I navigate to the next screen, it's returning 'undefined' for 'route.params'.
For reference, here is my component I'm passing data FROM:
const SignUpPasscodeScreen = ({ navigation }) => {
const [passcode, setPasscode] = useState(0)
return (
<View>
<View style={styles.mainView}>
<SubLogo />
<Heading title="Set passcode" />
<SubHeading content="You'll need this anytime you need to access your account." />
<Input inputText={ text => setPasscode(text) } inputValue={passcode} />
</View>
<View style={styles.subView}>
<CtaButton text="Continue" onPressFunction={ () => navigation.navigate({ routeName: 'SignUpLegalName', params: { passcode } } ) } />
</View>
</View>
)
}
And here's the component I'm passing data to, and where the error occurs upon navigation:
const SignUpLegalName = ({ route, navigation }) => {
const { passcode } = route.params
return (
<View>
<View style={styles.mainView}>
<SubLogo />
<Heading title="Tell us your name" />
<SubHeading content="This needs to be the same as what's on your passport, or any other form of recognised ID." />
<Input />
<Input />
</View>
<View style={styles.subView}>
<CtaButton text="Continue" onPressFunction={ () => navigation.navigate('SignUpLink')} />
</View>
</View>
)
}
I've tried two forms of passing the props through:
Passing it in as a second argument
Passing it in as a 'params' object as shown above
Both should work according to the documentation - link here
For reference, this is my route structure:
const switchNavigator = createSwitchNavigator({
loginFlow: createStackNavigator({
SignUpPasscode: SignUpPasscodeScreen,
SignUpLegalName: SignUpLegalName,
})
});
The above structure doesn't say to me that it's a nested structure which therefore requires any additional work to pass it through...
Can someone help? It'd be appreciated as it's giving me a headache!
Have a try with below code in the button press event:
<CtaButton
text="Continue"
onPressFunction={() => navigation.navigate('SignUpLegalName',{ passcode })}
/>
I am trying to navigate to the Main screen when Login button is pressed in Login.js. LoginForm loads perfectly but when I press the button I start receiving the error "TypeError: Undefined is not an object (evaluating 'navigation.navigate'). Before this was not a problem but it changed when I moved Login to a different component. I was getting a different error and I went through this but it didn't fix it: Getting undefined is not an object evaluating _this.props.navigation
Let me know if you need the whole code. Thanks :)
LoginForm.js
...
import Login from "./Login";
const LoginForm = props => {
return <Login />
}
...
Login.js
const Login = ({ navigation }) => {
return (
<TouchableOpacity
style={{ marginTop: 20 }}
activeOpacity={1}
onPress={() => navigation.navigate("Main")}
>
<View style={styles.loginButtonContainer}>
<Text style={styles.loginButtonText}>Login</Text>
</View>
</TouchableOpacity>
)}
...
I fixed it thanks to withNavigation. https://reactnavigation.org/docs/en/with-navigation.html
withNavigation is a higher order component which passes the navigation
prop into a wrapped component. It's useful when you cannot pass the
navigation prop into the component directly, or don't want to pass it
in case of a deeply nested child.
Login.js
import { withNavigation } from 'react-navigation'
const Login = ({ navigation }) => {
...
}
export default withNavigation(Login)
Anyway, if its possible, I would love to know how to fix it without this.
I recently tried using the Drawer component of Native Base 2.0 which basically has this template:
closeDrawer = () => {
this.drawer._root.close()
};
openDrawer = () => {
this.drawer._root.open()
};
render() {
return (
<Drawer
ref={(ref) => { this.drawer = ref; }}
content={<SideBar navigator={this._navigator} />}
onClose={() => this.closeDrawer()} >
<Content>
insert content here
</Content>
</Drawer>
)
}
I made my customer SideBar component with some ListItems in there, I made those list items clickable using the react-navigation package.
onPress={() => this.props.navigation.navigate(data)}>
The problem is that I don't get the this._navigator property that is being passed from the Side Bar and I always get this error:
NativeBase has deprecated Drawer, use react-navigation instead
They have added back Drawer in v2.8.0
https://github.com/GeekyAnts/NativeBase/releases/tag/v2.8.0
I am trying to create wizard form in react native with the help of this example. but handleSubmit is not working.
Signup.js
submitForm(values){
console.log("formValues",values);
}
nextPage(){
this.setState({ page: this.state.page + 1 });
}
render(){
const { page } = this.state;
{page === 1 && <WizardFormFirstPage nextPage={this.nextPage} />}
{page === 2 && <WizardFormSecondPage nextPage={this.nextPage} />}
{page === 3 && <WizardFormThirdPage onSubmit={this.submitForm} />}
}
WizardFormFirstPage and WizardFormSecondPage works fine. but when it comes on WizardFormThirdPage it doesn't do anything (I can't see any console log in my terminal for validations and submitForm function). here is the code written.
WizardFormThirdPage.js
const WizardFormThirdPage = props => {
const { handleSubmit, onSubmit } = props;
return (
<View>
<Field name="street" component={InputField} label="Street" />
<Button style= {{ margin: 10 }} block primary onPress={handleSubmit(onSubmit)}>
<Text>Continue</Text>
</Button>
</View>
);
};
export default reduxForm({
form: 'signup', // <------ same form name
destroyOnUnmount: false, // <------ preserve form data
forceUnregisterOnUnmount: true, // <------ unregister fields on unmount
validate,
})(WizardFormThirdPage);
This is probably too late but I figured out what I was doing wrong.
While wrapping the react native InputText component with the redux form Field component. We have to pass props to the InputText component. I was passing props like this ...
<InputText {...props} />
The {...props} attaches all the event handlers like onChange, onSubmit, etc to the component so we don't have to do it manually. The issue lies here, that the InputText component has a onChangeText property rather than onChange which redux form injects into the props.
The correct way to do this is ..
const renderInput = ({ input: { onChange, ...restInput }}) => {
return <TextInput style={styles.input} onChangeText={onChange} {...restInput} />
}
const Form = props => {
const { handleSubmit } = props
return (
<View style={styles.container}>
<Text>Email:</Text>
<Field name="email" component={renderInput} />
<TouchableOpacity onPress={handleSubmit(submit)}>
<Text style={styles.button}>Submit</Text>
</TouchableOpacity>
</View>
)
}
This answer came from the article Simple React Native forms with redux-form.