I have a one autocomplete textinput in react native.This autocomplete textinput shows suggestion below the area of textinput and once the user tap on that value ,that value gets set in textinput.Now i want to navigate to next page once the user selects the suggestion value and it set to textinput.Its like when you search search on google it give you suggestions and when you select any one suggestion,here i want to navigate to next scene once user selects suggestion and set those values to textinput
As I understood, you want to push next component on navigation stack with selected props.
You need to provide navigation for your components, take a look at navigator component:
https://facebook.github.io/react-native/docs/navigator.html
When navigation is set, you can navigate and pass props with method:
this.props.navigator.push({
name: 'name_of_your_component',
passProps: {
title: 'Components title',
data: someObject
}
});
If you have a listview providing suggestions, than you can wrap every row to TouchableHighligt. That way you are providing function that fires when row is tapped.
renderRow(data) {
return (
<TouchableHighlight
onPress={this.rowTapped.bind(this, data)}>
<View>
<Text>This is a row.</Text>
</View>
</TouchableHighlight>
);
}
Related
I have a calendar section in my app where I want to be able to swipe right or left to go to the next or previous day.
I know that you can use createMaterialTopTabNavigator from React Navigation to do something similar, but I'm not sure if it would work in this specific scenario (where I would have an infinite number of screens and wouldn't be able to predefine them).
I also considered using react-native-gesture-handler's Swipeable component to navigate to the next/previous day screen on a left/right swipe but I'm not sure if this is the easiest/best way to approach this problem.
As you mentioned, you can use Tabs or Swipable. There are some other options like using <ifaram> or <WebView> and using a web URL instead of RN components but it's can be tricky and hard to manipulate.
As a simple solution, you can use carousels instead of using multi screen defining navigation. It's very simple. assume that your screens are an image in an image gallery and you can swipe left/right.
There are many libraries, one of the best ones is: react-native-snap-carousle
Take a look at it's example:
import Carousel from 'react-native-snap-carousel';
export class MyCarousel extends Component {
_renderItem = ({item, index}) => {
return (
<View style={styles.slide}>
<Text style={styles.title}>{ item.title }</Text>
</View>
);
}
render () {
return (
<Carousel
ref={(c) => { this._carousel = c; }}
data={this.state.entries}
renderItem={this._renderItem}
sliderWidth={sliderWidth}
itemWidth={itemWidth}
/>
);
}
}
So you can pass a screen/page as _renderItem to the Carousel
Inside my StackNavigator, one of the components includes web content with a long loading time. However, this screen will only be shown late in my navigation flow.
How can I use this time to render my component in the background before finally switching to it?
I couldn't find anything comparable to ReactDOM.render in React Native that would allow me to render it manually.
I am not aware of any option in react-navigation to preload a screen that is not displayed, except maybe when the screen is part of a tab navigator.
Depending on what is slowing down the rendering, you might be able to do some actions in the first screen and later pass the results to the second screen using a navigation parameter.
For instance, if you are fetching data from an api in the second screen, you could fetch this data in the first screen and pass it to the second one:
this.props.navigation.navigate('SecondScreen', { data: this.data });
If it is a component, you could also try to build it in the first screen and pass it in the same fashion:
this.props.navigation.navigate('SecondScreen', { component: this.component });
If you are rendering a WebView in the second screen, what can help is to render the WebView in the first screen too, but with no width or height. The WebView will not be displayed but the website data will be fetched and cached, making the real render more efficient:
render() {
return (
<View>
<WebView source={{ uri: 'https://github.com/facebook/react-native' }} style={{ height: 0, width: 0 }} />
{this.renderCurrentScreen()}
</View>
);
}
Working on a react-native application where I've to list Custom Items in a FlatList. This custom items contains two buttons. Clicking on each of it will get some data regarding to that clicked item and will display another FlatList with custom items in between that clicked item and it's next item.
Here in this link I've drawn that screen looks. Clicking on button B2 will get a list and display in between Parent FlatList item See Screens Here
I've tried with the SectionList where I'm displaying my first list data in Headers of SectionList with Custom Component with two buttons. Clicking on any, will get another list of items and assigned those data to clicked section header data. Those data will be displayed as child items to selected Header section. But it didn't workout as expected so looking for some alternate way with FlatList.
Your main component will be like below:
export default class MainClass from React.Component{
render(){
<FlatList
data={items}
renderItem={({item}) => <ListItem/>}
/>
}
}
Your custom list item component will be like below:
export default class ListItem from React.Component{
render(){
<View>
<View>
//your card view which will contain B1 and B2 button
</View>
//below views will render conditionally
<FlatList/> //if B2 button clicked then show fetched list
<CalendarWidget/> //if B1 button clicked then show calendar data
</View>
}
}
Try to build your code like above solution. It should solve your problem.
I know this question is already asked but i didn't find any proper solution. So here is my question, i want to pass TextInput value to another screen on submit button.So, please tell me How to pass the value and display on another screen. I am new in react native development.
At the top of your component you want to declare your state.
class App extends Component {
state = {text: ""};
Then you want to save whatever text is in your TextInput to that state.
<TextInput onChangeText={text => this.setState({text})} />
Then you would want to pass that state to the other component you would need it in.
Add this to the onPress of your submit button:
onPress={() => navigate('OtherComponent', { text: this.state.text} )}
Then in your "OtherComponent" you can access the state like this:
this.props.navigation.state.params.text
This is assuming that you are using react-navigation.
At the top of your component you want to declare your state.
class App extends Component {
state = {text: ""};
Then you want to save whatever text is in your TextInput to that state.
this.setState({text})} />
Then you would want to pass that state to the other component you would need it in.
Add this to the onPress of your submit button:
onPress={() => this.props.navigation.navigate('OtherComponent', { text: this.state.text} );
Then in your "OtherComponent" you can access the state like this:
this.props.navigation.state.params.text
This is assuming that you are using react-navigation.
My Problem is that I would like to navigateBack() from the BountyDetailsScreen to the LoyaltyScreen, but the navigateBack() function call does not trigger any action. When I log the function it says:
The only thing I notice is, that the navigationStack is empty. When I do the same with the navigateTo function it is working, but then I have a messed up navigation stack.
In my LoyaltyScreen.js I am displaying a ListView. It is a RN ListView (not imported from shoutem).
LoyaltyScreen.js
renderRow(bounty) {
return (
<ListBountiesView
key={bounty.id}
bounty={bounty}
onDetailPress={this.openDetailsScreen}
redeemBounty={this.redeemBounty}
/>
);
}
ListBountiesView.js
The ListBountiesView renders each ListView Row and opens a Detail Screen when clicked on the Row.
render() {
const { bounty } = this.props;
return (
<TouchableOpacity onPress={this.onDetailPress}>
{bounty.type == 0 ? this.renderInShopBounty() : this.renderContestBounty()}
<Divider styleName="line" />
</TouchableOpacity>
);
}
BountyDetailsScreen.js
In the BountyDetailsScreen I display detailed information and would like to navigateBack() to the Loyalty Screen when I press a button.
<Button styleName="full-width" onPress={() => this.onRedeemClick()}>
<Icon name="add-to-cart" />
<Text>Einlösen</Text>
</Button>
onRedeemClick() {
const { bounty, onRedeemPress } = this.props;
onRedeemPress(bounty);
navigateBack();
}
navigateBack is an action creator. You need to map it to props and read it from props in your redeemClick function. Just executing the imported action creator won't do anything since it's not connected to Redux.
Here's an example of you map it to props:
export default connect(mapStateToProps, { navigateBack })(SomeScreen));
Here's how you use it:
const { navigateBack } = this.props;
navigateBack();
I can see that airmiha's answer is what you're looking for, but I just wanted to add onto it.
You can also use hasHistory to set up your #shoutem/ui NavigationBar (if you're using it) with a simple back button that utilises navigateBack().
<NavigationBar
styleName="no-border"
hasHistory
title="The Orange Tabbies"
share={{
link: 'http://the-orange-tabbies.org',
text: 'I was underwhelmed by The Orange Tabbies, but then I looked at that
sweet, sweet back button on the Nav Bar.
#MakeNavBarsGreatAgain',
title: 'Nevermind the cats, check the Nav Bar!',
}}
/>
You can find more examples with the NavigationBar component here.