React-Native navigation with section list - javascript

i have this code in the SectionListView.js:
class SectionListItem extends Component {
render(){
return(
<View>
<TouchableHighlight onPress={()=>navigation.navigate('YoutubeScreen')} underlayColor='transparent'>
<View style={styles.SectionListItem}>
<MaterialIcons name='youtube-searched-for' size={20} style={styles.YtIcon}>
</MaterialIcons>
<View style={styles.Item}>
<Text style={{fontFamily:Fonts.OpenSans}}>{this.props.item.name}</Text>
<Text style={{fontSize:6,fontFamily:Fonts.OpenSans}}>{this.props.item.details}</Text>
</View>
<View style={styles.IconContainer}>
<MaterialIcons name='chevron-right' size={15} style={styles.IconChevron}>
</MaterialIcons>
</View>
</View>
</TouchableHighlight>
</View>
);
}
}
I want that user clicking on list item, go to YoutubeScreen.
This sectionlist is included in a Source Screen:
export default class Source extends Component {
render() {
return (
<Container>
<Header style={styles.Header}>
<Left>
<Button transparent>
<Icon name='menu' onPress={()=>
this.props.navigation.navigate('DrawerOpen')}/>
</Button>
</Left>
<Body style={styles.Body}>
<Text style={{color:'#ffffff'}}>Source</Text>
</Body>
<Right />
</Header>
<Content style={styles.Content}>
<SectionListView/>
</Content>
</Container>
);
}
}
My error is "cant find navigate variable" in section list.I dont understand how pass navigation or navigate.

You need to pass the navigation prop in your component in order to access it
<SectionListView navigation={this.props.navigation}/>
and
<TouchableHighlight onPress={()=> this.props.navigation.navigate('YoutubeScreen')}
or a better way would be to access the navigation in your parent component
SectionListItem.js
onPress={()=>this.props.navigate('YoutubeScreen')}
Source.js
<SectionListView navigate={this._navigate}/>
// Outside of render
_navigate = (screen) => this.props.navigation.navigate(screen)

Related

React native Flatlist doesn't scroll

I have an weather app in react native that uses react-native-app-intro-slider that is basically a vertical FlatList. This is my App render
return (
<AppIntroSlider style = {{backgroundColor:'#4c669f'}}
renderItem = {_renderItem}
data = {dataToRender}
showDoneButton = {false}
showPrevButton = {false}
showNextButton = {false}/>
)
And the Slider items that i'm rendering look like this
_renderItem = ( {item} ) => {
return (
<View style={{flex:1}}>
<Text style={{fontSize:20, marginTop:20, color:'white',fontSize:25, alignSelf:'center'}}>{item.name}</Text>
<View style={{ flexDirection:'row', marginTop:15, alignItems:'center', justifyContent:'center'}}>
<Image source={{uri: 'http://openweathermap.org/img/wn/' + item.icon + '#2x.png'}} style={{width:90, height:90}}/>
<Text style={{color:'white', fontSize:60}}>{`${_.round(item.temp)}°C`}</Text>
</View>
<View>
<Text style={{alignSelf:'center', justifyContent:'center', color:'white', fontSize:20}}>{item.clouds}</Text>
<View style={{display:'flex', alignItems:'flex-start', marginLeft:40 }}>
<View style={{ marginTop:40, flexDirection:'row'}}>
<Icon name='wind' size={28}/>
<Text style={{marginLeft:5, fontSize:22, color:'white'}}>{item.wind} km/h</Text>
</View>
<View style={{ marginTop:10, flexDirection:'row'}}>
<Icon name='temperature-low' size={28} />
<Text style={{marginLeft:5, fontSize:22, color:'white'}}>{_.round(item.temp_min,1)} °C</Text>
</View>
<View style={{ marginTop:10, flexDirection:'row' }}>
<Icon name='temperature-high' size={28} />
<Text style={{marginLeft:5, fontSize:22, color:'white'}}>{_.round(item.temp_max,1)} °C</Text>
</View>
<View style={{ marginTop:10, flexDirection:'row' }}>
<Icon name='compress-alt' size={28} />
<Text style={{marginLeft:5, fontSize:22, color:'white'}}>{item.air_pressure} hPa</Text>
</View>
</View>
</View>
<View>
<FlatList
data={dataToRender16}
renderItem={renderFlatListItem}/>
</View>
</View>
);
}
And the issue is that the FlatList in the rendered item (in the second code snippet) is not scrolling down, I've tried changing some styles but none of that worked
First of your dataToRender16 must have some unique id ,and you must add keyExtractor to your FlatList.
checkout the following example:
<FlatList
keyExtractor={(item, index) => item.id}
data={dataItems}
renderItem={itemData => (
<ItemComponent
id={itemData.item.id}
onDelete={removeItemHandler}
title={itemData.item.value}
/>
)}
/>
Adding flex:1 to styles of the that FlatList is netsted is solved the issue
<View style={{flex:1, alignItems:'center', paddingTop:50}}>
<FlatList
data={dataToRender16 }
renderItem={renderFlatListItem}/>
</View>

Navigate to another screen with react-native-navigation

Good afternoon everyone. I'm a little bit stucked with a navigation on button click.
I would like to move to another screen on a button click
Button code part (./Components/Dashboard.js):
<List>
<ListItem avatar>
<Left>
<Thumbnail source={{ uri: 'image-url' }} />
</Left>
<Body>
<Button dark transparent>
<Text>Euro</Text>
<Text>4200</Text>
</Button>
</Body>
</ListItem>
</List>
And I have a new screen with few buttons (./Components/Screens/EuroScreen.js)
import * as React from 'react';
import { Button, View, Text } from 'react-native';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text>Euro Screen</Text>
<Button dark>Test</Button>
</View>
);
}
How I can add a click property to my Button in ./Components/Dashboard?
This might help
Dashboard({ navigation }) {
return (
<View>
<List>
<ListItem avatar>
<Left>
<Thumbnail source={{ uri: "image-url" }} />
</Left>
<Body>
<Button onPress={() => navigation.navigate("EuroScreen")}>
<Text>Euro</Text>
<Text>4200</Text>
</Button>
</Body>
</ListItem>
</List>
</View>
);
}

How can I show a new screen after a button is pressed in a component in react native?

I have a created a Carousel component Splash and at the last view/page of it, I have a TextInput and button.On Press, I want this button to open a new screen with BottomNav component where I can do by other stuffs. I just want this Splash as a landing page. But when on running this code I get Splash and BottomNav mounted in same screen.
My Apps.js:
export class App extends Component {
render() {
return (
<PaperProvider>
<Splash />
<BottomNav />
</PaperProvider>
)
}
}
export default App
Splash.js:
render() {
return (
<View style={styles.container} onLayout={this._onLayoutDidChange} >
<Carousel
style={this.state.size}
currentPage={0}
autoplay
isLooped={false}
bulletStyle={{borderColor:'#02101a'}}
bullets
chosenBulletStyle={{backgroundColor:'#02101a'}}
>
<View style={[styles.container, this.state.size]}>
<Text style={styles.title}>
Sanitize Your Hands Properly
</Text>
<Animated.View>
<Image source={require('../src/sanitizehand.png')} style={styles.img}/>
</Animated.View>
<Text style={styles.subtitle}>
Use an alcohol-based hand sanitizer that contains at least 60% alcohol to disinfect your hand at regular basis.
</Text>
</View>
<View style={[styles.container, this.state.size]}>
<Text style={styles.title}>
Practice Social Distancing
</Text>
<Animated.View>
<Image source={require('../src/socialdistancing.png')} style={styles.img}/>
</Animated.View>
<Text style={styles.subtitle}>
Practice social distancing and maintain space between yourself and others to prevent infection and its spread.
</Text>
</View>
<View style={[styles.container, this.state.size]}>
<TextInput
label='Phone No.'
value={this.state.text}
placeholder='Enter here'
onChangeText={text => this.setState({ text })}
style={styles.textinput}
/>
<Button mode="contained" onPress={() => console.warn('Press')} icon='arrow-right'>
Register
</Button>
</View>
</Carousel>
</View>
);
}
BottomNav.js:
render() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Feeds" component={Feeds} />
<Tab.Screen name="Global" component={Global} />
<Tab.Screen name="FAQ" component={Faq} />
</Tab.Navigator>
</NavigationContainer>
)
}
}

How to make a navigation button inside a view with a image and title inside the view React Native

If someone touches the view, there have to be opened a different page. But in this view there is also a image and text. So I have searched for it on the internet, but I couldn't find a good solution.
I have tried to place a button in the view, but it doesn't work.
export default class HomeScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.containerbetween}>
<View style={[styles.box, styles.box1]}>
<Image
style={styles.image}
source={require('../assets/images/Pooplog.png')}
/>
<Text style={styles.white}>Poep log</Text>
</View>
<View style={[styles.box, styles.box2]}>
<Image
style={styles.image}
source={require('../assets/images/Agenda.png')}
/>
<Text style={styles.white}>Kalender</Text></View>
</View>
<View style={styles.containerbetween}>
<View style={[styles.box, styles.box3]}>
<Image
style={styles.image}
source={require('../assets/images/Analyse.png')}
/>
<Text style={styles.white}>Analyse</Text></View>
<View style={[styles.box, styles.box4]}>
<Image
style={styles.image}
source={require('../assets/images/Tips.png')}
/>
<Text style={styles.white}>Tips en weetjes</Text></View>
</View>
</View>
)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Use TouchableOpacity:
<TouchableOpacity onPress={()=> {//navigate here}} style={[styles.box, styles.box1]}>
<Image
style={styles.image}
source={require('../assets/images/Pooplog.png')}
/>
<Text style={styles.white}>Poep log</Text>
</TouchableOpacity>

Whole text is copied to the right side in react native code

Now it is on the left side. How to copy the same text to the right even
and how can I style the button and style the text input more colorful and fonts bigger?
Here the example of what I want:
Here is what I have tried
<View style={StyleSheet.row}>
<Text>GAME 10</Text>
<TextInput
placeholder="GAME 10"
underlineColorAndroid="transparent"
style={StyleSheet.TextInputStyleClass}
/>
</View>
<View style={StyleSheet.row}>
<Text>TOTAL TEAM 1:</Text>
<TextInput
placeholder="TOTAL"
underlineColorAndroid="transparent"
style={StyleSheet.TextInputStyleClass}
/>
</View>
<TouchableOpacity onPress={this._onButtonPress}>
<Text>ADD</Text>
</TouchableOpacity>
You can move the text into a component, then just render the component twice:
export default class Text extends React.Component {
render() {
return (
<View>
<View style={StyleSheet.row}>
<Text>
GAME 10
</Text>
<TextInput placeholder="GAME 10" underlineColorAndroid='transparent' style={StyleSheet.TextInputStyleClass} />
</View>
<View style={StyleSheet.row}>
<Text>
TOTAL TEAM 1:
</Text>
<TextInput
placeholder="TOTAL"
underlineColorAndroid='transparent'
style={StyleSheet.TextInputStyleClass}
/>
</View>
<TouchableOpacity onPress={this._onButtonPress}>
<Text>ADD</Text>
</TouchableOpacity>
</View>
)
}
}
class Parent extends React.Component {
render() {
return (
<View>
<View className="left">
<Text />
</View>
<View className="right">
<Text />
</View>
</View>
)
}
}

Categories