I'm new here on react native, And i was trying to align the back button to the left, But keeping the title on the center, But nothing works, This is the code.
The TouchableOpacity is the back button, And the Text is the title, Each one have his own style.
import React, { Component } from 'react';
import { View, Text, TouchableOpacity, Image } from 'react-native';
import { Colors } from '../Variables';
class Header extends Component {
render(){
return(
<View style={ styles.headerStyle }>
<TouchableOpacity>
<Image style={ styles.backBtnStyle } source={ require('../graphics/icons/arrow_left_white.png') }/>
</TouchableOpacity>
<Text style={ styles.titleStyle }>
TITLE
</Text>
</View>
);
}
}
const styles = {
headerStyle: {
backgroundColor: Colors.primary,
flexDirection: 'row',
alignItems: 'center',
},
backBtnStyle: {
width: 25,
height: 25,
margin: 10,
},
titleStyle: {
color: '#fff',
textAlign: 'center',
fontSize: 25,
}
};
export default Header;
Thanks for helping.
You should try to view this document about Flex in React native and practive more to mastered it.
In Your case, just simplify add alignSelf: 'flex-start' to backBtnStyle StyleSheet to make it in first of your parent component
Here is demo code:
headerStyle: {
backgroundColor: Colors.primary,
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'flex-start'
},
<TouchableOpacity style={styles.backBtnStyle}>
<Image source={require('../graphics/icons/arrow_left_white.png') }/>
</TouchableOpacity>
You see: TouchableOpacity contain a Viewable Layout and wrap your image then you need to set style for TouchableOpacity to make flex work, not at Image.
From React NativeTouchableOpacity Documents: Opacity is controlled by wrapping the children in an Animated.View, which is added to the view hierarchy. Be aware that this can affect layout.
You can see Touchable Opacity Document here
Note: Set Your StyleSheet on StyleSheet.create() to make it create one and only one time when your bundle load. It make your app light weight and faster
Read about React Native StyleSheet here
You are using alignItems: 'center' in your container, so everything will be in the center.
In your case, there are a lot of solutions available. The more simple is just use a position: absolute; left: 15 in the styles.backBtnStyle.
Related
I have this Component
import React from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
const styles = StyleSheet.create({
container: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: 50,
height: 50,
borderRadius: 25,
},
button: {
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
borderRadius: 20,
height: 40,
width: 40,
},
});
const Button = ({
children = 'NO CONTENT HERE',
color = 'red',
onPress,
style = {},
}) => {
return <View
style={styles.container}>
<TouchableOpacity
style={[{ backgroundColor: color }, styles.button, style]}
onPress={onPress}>
{children}
</TouchableOpacity>
</View>
}
Button.propTypes = {
color: PropTypes.string,
onPress: PropTypes.func,
style: PropTypes.object
}
export default Button;
I use the Component <Button /> and do not pass a color prop to it. I expect the <Button /> to become red. However, it is white. When I pass a color prop, lets say green, it does not work neither. However, when I add a backgroundColor to the StyleSheet.button it gets applied. Why is that?
You need to change the order in which you apply the styles.
Try changing it to
<TouchableOpacity
style={[styles.button, style, { backgroundColor: color }]}
onPress={onPress}>
When you pass in multiple values with the same key, the last value is the one that gets used.
In React-Native, color props for Button works based on the mobile platform whether it’s an iOS or Android. When we pass color prop to a button, it changes the text color in iOS and a background-color in Android. So, it’s better to not rely on this prop for your requirement.
You may check the official React-Native documentation for button here-
https://reactnative.dev/docs/button
I would suggest to use a separate class to apply color to the button.
I have a ScrollView which has two children, and I want each of the children to be the full height of the available space on the screen, meaning view 1 fills the whole screen, and then I scroll down to start to see part of slide 2. If I scroll all the way down, I should only see slide 2.
I can't figure out how to get this to happen. What is currently happening is that each child is filling half of the available vertical space, so I don't get any scrolling.
Any ideas how I can achieve this layout? Thanks!
Current UI: https://i.imgur.com/fZdbUSo.png
Desired UI:
Before scrolling: https://i.imgur.com/EsQpVMm.png
After scrolling all the way down: https://i.imgur.com/PfXQyfI.png
Code:
import React from "react";
import {
StyleSheet,
ScrollView,
Text,
View
} from "react-native";
const Home = () => {return (
<ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollViewContainer}>
<View style={styles.slide1}>
<Text>this should be full height</Text>
</View>
<View style={styles.slide2}>
<Text>this should also be full height, but only be visible once i scroll down</Text>
</View>
</ScrollView>
)};
const styles = StyleSheet.create({
slide1: {
justifyContent: "center",
flexGrow: 1,
backgroundColor: "blue"
},
slide2: {
justifyContent: "center",
flexGrow: 1,
backgroundColor: "green"
},
scrollView: {
flex: 1
},
scrollViewContainer: {
flexGrow: 1
}
});
export default Home;
I'm not sure if there is a way to do what you are trying to accomplish with flex layout.
I would suggest getting the height of the visible container - either the height of the window or calculate it some other way, possibly using onLayout of the containing view and getting the height there, and then you have to set the height of your two inner views using that. You may need to wrap your scrollView in a View and use its onLayout function instead of the one for the scrollView.
To do the second part of your question, scrollView has a snapToInterval prop you can set.
Let me know how that goes for you or if you need code examples.
I was able to get this to work by using onLayout() as Doug Watkins suggested and updating the height of the children to match the height of the parent ScrollView:
import React, { Component } from "react";
import {
StyleSheet,
ScrollView,
Text,
View,
LayoutChangeEvent
} from "react-native";
class Home extends Component {
state = {
slideHeight: 0
};
updateHeight = (e: LayoutChangeEvent) => {
this.setState({ slideHeight: e.nativeEvent.layout.height });
};
styles = StyleSheet.create({
slide1: {
justifyContent: "center",
backgroundColor: "blue"
},
slide2: {
justifyContent: "center",
backgroundColor: "green"
},
scrollView: {
flex: 1
},
scrollViewContainer: {
flexGrow: 1
}
});
render () {
return (
<ScrollView style={this.styles.scrollView} contentContainerStyle={this.styles.scrollViewContainer} onLayout={this.updateHeight}>
<View style={[this.styles.slide1, {height: this.state.slideHeight}]}>
<Text>this should be full height</Text>
</View>
<View style={[this.styles.slide2, {height: this.state.slideHeight}]}>
<Text>this should also be full height, but only be visible once i scroll down</Text>
</View>
</ScrollView>
)
}
};
export default Home;
You can use react-native-swiper to achieve this functionality. Set your data or component in swiper slides and set props horizontal={false} to get vertical sliding.
So, first install react-native-swiper using this command:
npm i react-native-swiper --save
Now, import and use it as following :
import React from "react";
import { StyleSheet, ScrollView, Text, View } from "react-native";
import Swiper from "react-native-swiper";
const { width } = Dimensions.get("window");
const { height } = Dimensions.get("window");
const Home = () => {
return (
<Swiper style={{}} height={height} horizontal={false}>
<View style={styles.slide1}>
<Text>this should be full height</Text>
</View>
<View style={styles.slide2}>
<Text>
this should also be full height, but only be visible once i scroll
down
</Text>
</View>
</Swiper>
);
};
const styles = StyleSheet.create({
slide1: {
justifyContent: "center",
flexGrow: 1,
backgroundColor: "blue",
},
slide2: {
justifyContent: "center",
flexGrow: 1,
backgroundColor: "green",
},
scrollView: {
flex: 1,
},
scrollViewContainer: {
flexGrow: 1,
},
});
export default Home;
I know this may not perfect solution, but it work around. Swiper originally made up with scrollview, so there may be not problem.
I have build a 'box' that contain my style to the components, I have manage to put there only text but no success with icon/image plz help
I have build a 'box' that contain my style to the components, I have manage to put there only text but no success with icon/image plz help
I have build a 'box' that contain my style to the components, I have manage to put there only text but no success with icon/image plz help
App:
.....import Box from './src/box';
......
<View style={{height: 100,flexDirection:'row',flex:1}}>
<Box someText={'sushi'}
//, background source={require('./assets/sushi.png')}
//,TouchableHighlight onPress={this.message_function}
/>
</View>
box:
import { StyleSheet, Dimensions, Text,View ,Image} from "react-native";
import React from 'react' ;
export default class Box extends React.Component {
render() {
return (
<View style={styles.box}>
<Text style={styles.paragraph}> {this.props.someText}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
box: {
flex: 1,
height: 100,
//backgroundColor: '#ccc',
margin: 8,
},
paragraph: {
//margin: 24,
fontSize: 15,
textAlignVertical:10,
fontWeight: 'bold',
textAlign: 'center',
textAlignVertical: 'bottom',
//top:0, left: 0, right: 0,
color: '#000',
width: '100%',
height: '70%',
backgroundColor: 'rgba(255,255,255,0.8)'
}
});
You can wrap an <Image> or Icon component within your box <View>
So it will end up something like this:
<View style={styles.box}>
<Image source={require('your-image-path')} />
</View>
Image component docs: https://facebook.github.io/react-native/docs/image.html
There are several libs to handle Icon component:
React Native Elements: https://react-native-training.github.io/react-native-elements/docs/icon.html
import { Icon } from 'react-native-elements'
<Icon name='rowing' />
React Native Vector Icons: https://github.com/oblador/react-native-vector-icons
import Icon from 'react-native-vector-icons/MaterialIcons';
<Icon name="user" />
React Native Icons: https://github.com/corymsmith/react-native-icons
import Icon from 'react-native-icons';
<Icon
name='ion|beer'
size={40}
color='#887700'
/>
Hope it helps
I am building a react native app using mock data. I am able to render some of the mock data in a flatlist but the image will not render. In the react native devtools it shows the image url but no style is shown even though I have the style in the Stylesheet element.
import React, { Component } from "react";
import { StyleSheet, Text, View, Image, ListView } from "react-native";
class BookItem extends Component {
render(){
return (
<View style = {styles.bookItem}>
<Image style = {styles.cover} /> //is this the issue?
<View style = {styles.info}>
<Text style = {styles.author}>{this.props.author}</Text>
<Text style = {styles.title}>{this.props.title}</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
bookItem: {
flexDirection: "row",
backgroundColor: "#FFFFFF",
borderBottomColor: "#AAAAAA",
borderBottomWidth: 2,
padding: 5,
height: 175
},
cover: {
flex: 1,
height: 150,
resizeMode: "contain"
},
info: {
flex: 3,
alignItems: "flex-end",
flexDirection: "column",
alignSelf: "center",
padding: 20
},
author: { fontSize: 18 },
title: {fontSize: 18, fontWeight: "bold"}
});
export default BookItem
Im not sure if I am using the Image element in react native properly. This could be the issue. For the most part it shows the data in the devtools
You have to use image with source property. If you want to to add a just background you should use just View with background style.
Look at the official doc from here
Example is at the below.
<Image
style={{width: 50, height: 50}}
source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
/>
You mentioned a flatlist but the code sample you provided does not have a flatlist.
Refer to the documentation for more information.
https://facebook.github.io/react-native/docs/image.html
Here are the examples provided in the documentation.
<Image
source={require('/react-native/img/favicon.png')}
/>
<Image
style={{width: 50, height: 50}}
source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
/>
<Image
style={{width: 66, height: 58}}
source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
/>
Could you maybe mock up your problem for us?
https://snack.expo.io/
Two things: Image component needs a source prop to render an image and second, try not to use flex with images. Usually they need width AND height property manually set to render properly.
Change the value for resizeMode to cover instead of contain. This has resolved the same issue for me.
I had the same problem, i suggest you update react-native to version 0.63.3
It will probably cause errors, in which case you could use this React-Native upgrade helper.
https://react-native-community.github.io/upgrade-helper/
I am currently developing an application, and I am having trouble figuring out how to get the button to change color after being pressed using TouchableHighlight. Not to be confused with the underlayColor prop which I know exists as part of TouchableHighlight which only changes the color for when the button is pressed and then returns to its regular color.
This is what I have so far (Some of the code has been omitted for simplicity):
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableHighlight,
Alert,
} from 'react-native';
class MeetingScreen extends Component {
constructor(props){
super(props);
this.state = {
buttonColor: '#7395AE',
}
this.onButtonPress=this.onButtonPress.bind(this);
}
onButtonPress(){
this.setState({ buttonColor: 'red' });
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight
style={styles.talk}
color={this.state.buttonColor}
onPress={() => this.state.buttonColor}
selected={this.onButtonPress}
>
<View>
<Text style={styles.welcome} >
Talk
</Text>
</View>
</TouchableHighlight>
</View>
);
}
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#7395AE',
},
welcome: {
fontSize: 30,
textAlign: 'center',
margin: 10,
color: '#ffffff',
},
talk:{
height: 200,
width: 200,
borderWidth: 5,
backgroundColor: '#7395AE',
borderRadius: 100,
borderColor: '#557A95',
justifyContent:'center',
alignItems:'center',
borderRadius: 100
},
});
export default connect(mapStoreToProps, mapDispatchToProps)(MeetingScreen);
I have looked at other answers on StackOverflow and have attempted a good portion of them but I couldn't find anything that fit specifically to my issue. I have also looked at the React Native documentation and wasn't able to find anything helpful. The code as it is right now just displays the button and when pressed it goes black but then goes back to it's original color after being pressed. What I am looking for is for the button to turn red and stay red after being pressed. Any help would be greatly appreciated. Thank you so much for any help in advance!
<TouchableHighlight
style={[styles.talk, { backgroundColor: this.state.buttonColor}]} //Or if don't want "backgroundColor:" and just need change the text color use => "color:""
onPress={() => this.state.buttonColor}
selected={this.onButtonPress}/>