In my react native app i have view with centered text and edit icon i need to enable click functionality in this view. for that i used TouchableOpacity's onPress. and in my style i need absolute position . then my onPress is not working.
I have code like this:
<TouchableOpacity
style={styles.topBand}
onPress={this._editPatientInfo}
>
<View style={styles.topView}>
<View style={{ flex: 1 }}>
<Text style={styles.topTitle}>{topTitle}</Text>
</View>
<View style={{ alignSelf: "flex-end" }}></View>
<Icon
pencil
name="pencil"
type="font-awesome"
size={20}
onPress={ this._editPatientInfo}
/>
</View>
</TouchableOpacity>
styles:
topBand: {
width: "100%",
position: "absolute",
top: 0,
alignItems: "center",
padding: 5,
backgroundColor: Colors.topBandColor
}
topView: {
flexDirection: "row",
alignItems: "center"
}
When clicking the function is not getting triggered. If i remove position: "absolute", from the style(topBand) it will work but without that the position is not correct.
What is the problem? How should i resolve it?
You need to wrap your touchableOpacity with a view that has position absolute
then it may work
<View style={styles.wrapper}>
<TouchableOpacity
style={styles.topBand}
onPress={this._editPatientInfo}
>
<View style={styles.topView}>
<View style={{ flex: 1 }}>
<Text style={styles.topTitle}>{topTitle}</Text>
</View>
<View style={{ alignSelf: "flex-end" }}></View>
<Icon
pencil
name="pencil"
type="font-awesome"
size={20}
onPress={ this._editPatientInfo}
/>
</View>
</TouchableOpacity>
</View>
wrapper:{
width: "100%",
position: "absolute",
top: 0,
},
topBand: {
alignItems: "center",
padding: 5,
backgroundColor: Colors.topBandColor
}
topView: {
flexDirection: "row",
alignItems: "center"
}
Import TouchableOpacity from react-native-gesture-handler
import { TouchableOpacity } from 'react-native-gesture-handler'
Related
Is it possible to have the following layout (without resorting to absolute positioning)?
|...........centreElement.......RightElement|
So as if the justifyContent was 'space-between' but without the first element. I also thought to 'justifyContent: 'centre'' and then try 'justifySelf: 'flex-end' on the RightElement but this property does not exist.
<View styles={styles.container}>
<Text>centreElement</Text>
<Text>RightElement</Text>
</View>
container: {
flexDirection: 'row',
justifyContent: 'center'
}
There is mistake in your code please update code from <View styles={styles.container}> to <View style={styles.container}>
Please try the following code:
<View style={styles.container}>
<View style={{ flex: 1 }} />
<View style={{ flex: 1 }}>
<Text>centreElement</Text>
</View>
<View style={{ flex: 1 }}>
<Text>RightElement</Text>
</View>
</View>
An ideal solution without using absolute. The CentreElement text might not comes at the center, but without absolute, you cannot align it either, since you are not giving the content to take up the 100% width which is needed to rightly align the content to center. Following steps can give you the satisfying results:
Just give out flexDirection: 'row' to the container
Give both the text CentreElement and RightElement 50% width
Align both of them to right, and done!!
Code:
export default function App() {
return (
<View style={styles.container}>
{/* Txt container*/}
<View style={styles.textContainer}>
<Text style={styles.text}>
CentreElement
</Text>
<Text style={styles.text}>
RightElement
</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
textContainer: {
width: '100%',
flexDirection: 'row'
},
text: {
textAlign: 'right',
width: '50%',
fontSize: 16,
fontWeight: 'bold'
}
});
Result:
I am trying to create a TouchableOpacity after a FlatList in react native. Although it's coming under the view but there is a huge gap between the list and the button.
Following is the corresponding code :
<FlatList keyExtractor={(payment) => payment.iconFont} style={{ alignSelf: "center" }} data={payments} renderItem={({ item }) => {
return <View style={{ width: '100%', marginTop: 32 }}>
<View style={{ flexDirection: "row" }}>
<View>
<FontAwesome5 name={item.iconFont} size={32} />
</View>
<View>
<Text style={{ fontSize: 18, marginLeft: 16 }}>{item.mainText}</Text>
<Text style={{ fontSize: 12, marginLeft: 12 }}>{item.SubText}</Text>
</View>
</View>
</View>
}} />
<TouchableOpacity style={styles.button}>
<Text style={{ color: "#FFF", fontWeight: "500", fontSize: 20 }}>PAY</Text>
</TouchableOpacity>
I am doing something wrong over here ?
P.S. => Although FlatList is working fine
the corresponding styles :
button: {
backgroundColor: "#000000",
height: 40,
alignItems: "center",
justifyContent: "center",
borderRadius: 20
}
Move the Touchable Opacity into Flatlist's listfootercomponent prop. Like this:
<FlatList
ListFooterComponent={<TouchableOpacity> .... </TouchableOpacity>}
/>
This should solve the spacing problem. And place the TouchableOpacity component always at the bottom of the FlatList.
react-native version: "0.62.0", I tried this code
ui coming like this:
React Native
</View>
<View style={{flex:8}}>
<View style={{padding: 20, height: 200, backgroundColor: 'red'}}>
<Text style={fonts.bold}>View 1</Text>
</View>
<View style={{padding: 20, height: 200, backgroundColor: 'red'}}>
<Text style={fonts.bold}>View 1</Text>
</View>
<View style={{padding: 20, height: 200, backgroundColor: 'yellow'}}>
<Text>View 1</Text>
</View>
<View style={{padding: 20, height: 200, backgroundColor: 'green'}}>
<Text>View 1</Text>
</View>
</View>
</View>
How to do it?
give Text width greater than space occupied by characters with some padding
It looks like you did not provide the code for intended green view. The green view in your code is different. It is under yellow view.
Tip: For intended view try to remove height and width properties.
Created a sample according to your problem
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.wrapperStyle}>
<View style={styles.leftStyle}>
<Text style={styles.textStyle}>Trending</Text>
</View>
<View style={styles.rightStyle}>
<Text>View 1</Text>
</View>
</View>
<View style={styles.wrapperStyle}>
<View style={[styles.leftStyle, { backgroundColor: 'green' }]}>
<Text style={styles.textStyle}>Top_games</Text>
</View>
<View style={[styles.rightStyle, { backgroundColor: 'yellow' }]}>
<Text>View 2</Text>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: 20,
},
wrapperStyle: {
height: 200,
flexDirection: 'row'
},
leftStyle: {
flex: 2,
backgroundColor: 'gray',
alignItems: 'center',
justifyContent: 'center'
},
rightStyle: {
flex: 8,
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center'
},
textStyle: {
transform: [{ rotate: '-90deg' }]
}
});
Somtetimes you have to change flex value according to your requirements.
Hope this helps you. Feel free for doubts.
I have a flatlist that renders a clickable item (with touchable opacity) and an image background with some text in the middle.
The goal is to render a flatlist that looks like this:
I am trying to add light opacity to the image by adding a view with an overlay and I tried multiple solutions but nothing seems to work.
This is what I have achieved so far:
This is the item in the flatlist:
// console.log("item", item.latest_image.media[0].url);
if (item.empty === true) {
return <View style={[styles.item, styles.itemInvisible]} />;
}
return (
<TouchableOpacity
onPress={() =>
this.props.navigation.push(Screens.Photos, {
team: item,
id: this.props.navigation.getParam("team").id
})
}
>
<ImageBackground
style={styles.backgroundImage}
imageStyle={{ borderRadius: theme.borders_MediumRadius.borderRadius, backgroundColor: 'rgba(255,0,0,.6)' }}
source={{ uri: item.latest_image.media[0].url }}
>
<Text style={styles.itemText}>{item.title.toUpperCase()}</Text>
</ImageBackground>
</TouchableOpacity>
);
};
This is the flatlist:
<SafeAreaView style={{ flex: 1 }}>
<ScrollView
style={{ flex: 1, backgroundColor: "black" }}
scrollEnabled={scrollEnabled}
onContentSizeChange={this.onContentSizeChange}
>
<FlatList
data={formatData(this.state.data, numColumns)}
style={styles.container}
renderItem={this.renderItem}
numColumns={numColumns}
scrollEnabled={scrollEnabled}
/>
<FollowUs />
</ScrollView>
</SafeAreaView>
);
and these are the style props:
container: {
margin: 7.5,
backgroundColor: "black"
},
backgroundImage: {
flex: 1,
height: hp("25"),
backgroundColor: "black",
margin: 7.5,
justifyContent: "center",
alignItems: "center"
},
itemInvisible: {
backgroundColor: "transparent"
},
itemText: {
fontFamily: "RobotoCondensed-Bold",
fontSize: RF(4),
color: "black"
},
overlay: {
backgroundColor: "rgba(255,0,0,0.5)",
alignItems: "center",
justifyContent: "center",
flex: 1,
margin: 7.5,
height: hp("25"), // approximate a square
borderRadius: theme.borders_MediumRadius.borderRadius
}
});
If anybody could help me it would be really appreciated!
Thanks
Here's an example of how you can achieve this
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={{
backgroundColor: '#FFF',
height: 200,
width: 200,
position: 'relative'
}}>
<ImageBackground
source={{ uri: 'https://placehold.it/200x200' }}
style={{
height: 200,
width: 200,
opacity: 0.6,
position: 'absolute',
}}
/>
<View
style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Hello World!</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
Here's an example Snack - https://snack.expo.io/#hannigan/lonely-bubblegum
You should also set the activeOpacity on the TouchableOpacity to be the same value as what you will set on the ImageBackground (0.6)
Solved it by adding a view around the text and giving it these props:
<View
style={{
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "rgba(255,255,255,0.75)",
borderRadius: theme.borders_MediumRadius.borderRadius
}}
>
<Text style={styles.itemText}>{item.title.toUpperCase()}</Text>
</View>
I build react native app and I use with scrollView for header with list of text horizontal.
The issue is that the height of the scroll view takes half size of the screen. Even after declared it as a style, it still stays as it is.
screen with the scrollView
<View style={Style.container} >
{this.props.ExtendedNavigationStore.HeaderTitle ? <BackHeader header={this.props.ExtendedNavigationStore.HeaderTitle} onPressBack={this.goBack} /> : <Header openDrawer={this.openDrawer} />}
<ScrollView contentContainerStyle={{flexGrow:1}} style={Style.scrollableView} horizontal showsHorizontalScrollIndicator={false}>
{this.renderScrollableHeader()}
</ScrollView>
<Routes /> /* stack with dashboard screen */
</View>
</Drawer>
)
}
styles
import {StyleSheet} from 'react-native'
import {calcSize} from '../../utils'
const Styles = StyleSheet.create({
container : {
flex:1,
backgroundColor:"#e9e7e8"
},
scrollableView:{
height: calcSize(40),
backgroundColor: '#000',
},
textCategory:{
fontSize: calcSize(25),
color:'#fff'
},
scrollableButton:{
flex:1,
margin:calcSize(30)
}
})
export default Styles
As you can see the black size is the scroll View,
I want it to be small.
In routes stack into dashboard screen, the style:
const Style = StyleSheet.create({
container: {
backgroundColor: '#9BC53D',
flex: 1,
justifyContent: 'space-around',
alignItems: 'center'
},
text: {
fontSize: 35,
color: 'white',
margin: 10,
backgroundColor: 'transparent'
},
button: {
width: 100,
height: 75,
margin: 20,
borderWidth: 2,
borderColor: "#ecebeb",
justifyContent: "center",
alignItems: "center",
borderRadius: 40
}
})
There is an existing limitation with ScrollView where height cannot be provided directly.
Wrap the ScrollView in another View and give height to that View.
Like,
render() {
return (
<View style={styles.container}>
<View style={{height: 80}} >
<ScrollView
horizontal
style={{ backgroundColor: 'blue'}}
>
<Text style={{padding: 24}} >title1</Text>
<Text style={{padding: 24}} >title2</Text>
<Text style={{padding: 24}} >title3</Text>
<Text style={{padding: 24}} >title4</Text>
<Text style={{padding: 24}} >title5</Text>
</ScrollView>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
});
snack sample: https://snack.expo.io/HkVDBhJoz
EXTRAS: Unlike height providing width to a ScrollView will work correctly
Use flexGrow:0 inside ScrollView style
<ScrollView style={{ flexGrow:0 }}>
That worked for me:
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<View style={{ flexGrow: 1 }}>
...
</View>
</ScrollView>
Considering the issue that you are using fixed height for the header, and flex for the Routes maybe, the orientation for different devices would not scale well and would look weird.
Therefore you may consider switching it to the flex
Here is the example by adding flexGrow to the styles of the ScrollView since it accepts view props
<View style={{ flex: 1 }}>
<ScrollView style={{ flexGrow: 0.05, backgroundColor: 'red', paddingTop: 50 }} horizontal>
<View style={{ width: 100 }}><Text>Label</Text></View>
<View style={{ width: 100 }}><Text>Label</Text></View>
<View style={{ width: 100 }}><Text>Label</Text></View>
<View style={{ width: 100 }}><Text>Label</Text></View>
<View style={{ width: 100 }}><Text>Label</Text></View>
</ScrollView>
<View style={{ flex: 0.95, backgroundColor: 'green' }} />
</View>
and here's the link to the snack expo
Use maxHeight inside scrollview style
<ScrollView style={{ maxHeight: 40 }}>•••</ScrollView>
Setting minHeight: int, maxHeight: int to ScrollView should work where int is height in pixels.
example below
<ScrollView style={{ minHeight: 280, maxHeight: 260}}>