How can I call a componentWillMount method in this class?
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TextInput,
Button
} from 'react-native';
import {TabNavigator} from 'react-navigation';
import Friends from './src/Friends'
import Moms from './src/Moms'
const Navigation = TabNavigator({
Tab1:{
screen:Friends
},
Tab2: {
screen: Moms
}
})
export default Navigation;
What I am trying to do is call resetAction to reset all the navigation state. However, I do not want to implement it for each tab(Friends and Moms) separately but just call it once in my TabNavigator class( for example in componentWillMount).
P.S. I do not want to use redux.
You can call your reset action before the declaration of your TabNavigator, no need for componentWillMount.
You can check the current routeName, if its within the tab navigator initial route trigger the reset action
Related
I've fletched a list of items and rendered it into my app.
Its the first page of the app.
The thing that I want to do is:
Make each of the items "touchable", and when you touch it, you open a component filled with objects from a second fetch requisition.
I am new to react native, do you know if I have to use a lib or something to do it?
I'll try to answer your questions one by one.
Make each of the items "touchable"
Wrap your components with TouchableOpacity which you can import from react native like this import {TouchableOpacity} from "react-native";
when you touch it, you open a component filled with objects
You need to implement onPress method there and also react navigation to load other components.
<TouchableOpacity onPress={() => this.props.navigation.navigate("newScreenName")}>
<MyCustomComponent>
...
</MyCustomComponent>
</TouchableOpacity>
and creating screen will be like this :
import { createStackNavigator } from "react-navigation";
import Screen1 from "./Screen1";
import Screen2 from "./Screen2";
...
const customStackNavigator = createStackNavigator(
{
newScreenName: {
screen: Screen1
},
newScreenName1: {
screen: Screen2
}
},
{}
);
check API & Docs here
Also, Please check this example for more details
For my solution I want users to get all components from my library.
Example: import Checkbox from 'MyLibrary';
But for native, I'm don't want to make all the components my self. At least, not now. And that is why I want them to reference my library, so when I do change/write the component, it will automaticly update at their end.
For example, a checkbox. There is a default react-native checkbox (https://facebook.github.io/react-native/docs/checkbox)
I would like to export this default component within my component.
I tried things like:
export { Checkbox as default } from 'react-native';
and
import { Checkbox } from 'react-native';
export default Checkbox;
and
import React from 'react';
import { Checkbox as ReactCheckbox } from 'react-native';
const Checkbox = (...props) => <ReactCheckbox {...props} />;
export default Checkbox;
But that didn't work. Any suggestions?
Edit: I made a mistake with the import, it's CheckBox not Checkbox...
It's CheckBox, not Checkbox, doh!
I'm not quite sure but, while I tried your code it didn't worked on mine too. But, you can do like this:
import { TextInput as myTextInput } from 'react-native';
But, while I checked this on expo app:
import { CheckBox as myCheckBox } from 'react-native';
From this what I think is react native doesn't support CheckBox on Expo app. But, if you libraries like React Native Elements or Native Base. Then you can import checkbox like this.
import { CheckBox as myCheckBox } from 'react-native-elements';
Maybe this Snack will help you.
Happy coding :)
If I understand you correctly, you want to RE-EXPORT the React/Community checkbox as your component and replace it with your own component in future?
Native Checkbox component is only available in Android, so you have to use community built one from UI-Kitten/Native Base/React Native Element.
First explore and pick your UI Library and install it. Then you can import the checkbox component from the respective library and export it until you write your own component.
This will work
import { CheckBox } from 'react-native-elements';
export default CheckBox;
In case you want to wrap the component with default properties or styling then you can do something like below
import { CheckBox } from 'react-native-elements';
export default function(props) {
const yourProps = {
checkedIcon: <Image source={require('../checked.png')} />,
uncheckedIcon: <Image source={require('../unchecked.png')} />
};
return (
<CheckBox {...yourProps} {...props} />
);
}
I installed react-navigation and got a Switch Navigator to work, but I am unable to get a Tab Navigator to work. When I compile, I get this error:
Warning: isMounted(...) is deprecated in plain JavaScript React
classes. Instead, make sure to clean up subscriptions and pending
requests in componentWillUnmount to prevent memory leaks.
Then when I dismiss the error, I get a blank screen. My compiler doesn't detect any syntax errors.
import React, { Component } from "react";
import { View, StyleSheet } from "react-native";
import { MainFeed, Login, Camera, Profile } from "./components/screens";
import { SwitchNavigator, TabNavigator } from "react-navigation";
const Tabs = TabNavigator({
feed: MainFeed,
camera: Camera,
profile: Profile
});
const MainStack = SwitchNavigator({
login: Login,
main: Tabs
});
class InstaClone extends Component {
render(){
return <MainStack/>;
}
}
export default InstaClone;
I've just started to learn React-(Native) and I'm not feeling comfortable to debug errors. Mostly all of them doesn't point to any line from my code and this makes really hard to find solutions.
For example:
In this case, how could I find from what of my lines this exception was called?
Also, if you know how to solve this problem heres the code:
index.js
import {
StackNavigator,
} from 'react-navigation';
import LoginScreen from './loginView'
import HomeScreen from './homeView'
export default screens = StackNavigator({
Home: { screen: HomeScreen },
Login: { screen: LoginScreen },
});
loginView
import {StackNavigator,} from 'react-navigation';
import LoginScreen from './loginView'
import HomeScreen from './homeView'
export default screens = StackNavigator({Home: { screen: HomeScreen },Login: { screen: LoginScreen },});
homeView
(paste not working)
https://pastebin.com/YsnVkinQ
index.android.js
import React, { Component } from 'react';
import screens from './app/index';
import {AppRegistry,StyleSheet,Text,View} from 'react-native';
AppRegistry.registerComponent('estudo1', () => screens);
My App.js file was getting very large, so I decided to move out all my classes to their own separate file, and this is what remains in my App.js
import React from 'react';
import {
AppRegistry,
Text,
View,
Button,
Image
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import { TabNavigator } from 'react-navigation';
//screen imports
import RecentChatScreen from './RecentChatScreen';
import AllContactsScreen from './AllContactsScreen';
import ChatScreen from './ChatScreen';
import HomeScreen from './HomeScreen';
import InfoScreen from './InfoScreen';
const MainScreenNavigator = TabNavigator({
Home: { screen: HomeScreen },
Recent: { screen: RecentChatsScreen },
All: { screen: AllContactsScreen },
});
const NavTest = StackNavigator({
Home: { screen: MainScreenNavigator },
Chat: { screen: ChatScreen },
Info: { screen: InfoScreen }
});
I think that looks fine.
However in some of the class files, I need to reference those other screens in button events, like this:
onPress={ () => navigate('Home')}
This worked fine before when everything was in App.js, but how would I reference these screens(Home, Chat, Info, Recent, All) now in the their separate files when the definitions are in App.js?
Thanks!
You can export them in App.js:
// App.js
// ...
export {
MainScreenNavigator,
NavTest,
}
And then import them from it:
import {MainScreenNavigator, NavTest} from './path/to/App.js';
If your intent is just to navigate to the different screens, and not use any properties defined within a particular screens class, then you would not need to import anything. When you define the StackNavigator and lets say you are passing in that value into the AppRegistry as the entry point of the application. In your case, it could be something like this:
AppRegistry.registerComponent('NavTest', () => NavTest)
Now within any of the screens, the navigatation object is passed in as a prop. You can then use that to navigate to any of the defined screens. The initial setup of the StackNavigator is essentially a mapping from a routeName to a react component (a class). So when you want to navigate to a particular class, all you need is the name of the route not the class or component it represents, the navigator already has all that. This name would be the key passed into the StackNavigator for a particular screen. In your example, the routeNames are Home, Chat and Info. So just doing something like this would work:
const { navigate } = this.props.navigation;
return (
<View>
<Text>Navigate Test</Text>
<Button onPress={() => navigate('Chat')} title="Go to chat"/>
</View>
);