I have an application that works on native and web via React Native and React Native Web. One screen includes a list with custom bullets as in the image below, although the text often runs to multiple lines. The problem is that when you copy/paste (at least on web), the bullet image winds up on a separate line from the text, and it looks awful. Is there some way to refactor the view so that copy/paste keeps the original appearance?
<View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start', width: '100%' }}>
<Image style={{ height: 10, width: 14, marginTop: 9 }} source={TRIANGLE_BULLET as ImageSourcePropType} resizeMode="contain" />
<View style={{ width: '90%', marginTop: 3, marginBottom: 3, marginLeft: 7 }}>
<Text>Final scoring</Text>
</View>
</View>
Setting padding-left: 14px and text-indent: -14px did the trick. From past experience with React Native, I thought a negative text-indent would cause problems, but it actually works fine.
I'm having problems setting transparency for a View that is outside of the ScrollView. I'm using Expo. The idea is that when you scroll the long scrollview content, you should just about to see it behind the bottom view. I've tried the opacity property as well as setting the background color using rgba(x,x,x, 0.5) with no luck. It looks like anything outside the Scrollview is totally opaque in relation to the scrollview content behind it.
Basic Code (the link to the snack is below):
export default function App() {
return (
<View style={styles.container}>
<ScrollView>
<View style={styles.transparentWrapper}>
<Text style={styles.textElement}>This is some text wrapped in a transparent View</Text>
</View>
<Text style={styles.paragraph}>
Lorem....
</Text>
<Text style={styles.paragraph}>
Lorem ...
</Text>
</ScrollView>
<View style={styles.bottomPart}>
<Text style={styles.textElement}>This is some text. Its wrapping view is transparent but I cannot see the lorem text underneath it.</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
},
paragraph: {
fontSize: 30,
marginBottom: 15,
},
textElement: {
color: 'blue',
},
transparentWrapper: {
position: 'absolute',
height: 100,
justifyContent: 'center',
top: 450,
left: 50,
backgroundColor: 'transparent',
zIndex: 999,
},
bottomPart: {
height: 50,
backgroundColor: 'transparent',
}
});
Full snack is here:
https://snack.expo.dev/#wastelandtime/scrollview-transparency
Here's an expected outcome. The top blue text is wrapped in a transparent view (and this is what it's supposed to look like) it's not a problem as it's within the ScrollView.
The bottom blue text does not seem to honour any transparency in terms of the scroll content behind it (I'd like just to see the blue text with complete transparency on the wrapping View.
it can be achieved without position: 'absolute', with negative margin in this way,
bottomPart: {
height: 50,
backgroundColor: 'transparent',
marginTop: -50, // add this
}
using negative top margin the text can be pushed upwards
snack link here https://snack.expo.dev/CJBbhSCzg
Setting bottomPart position to absolute and bottom: 0
bottomPart: {
height: 50,
backgroundColor: 'transparent',
position: 'absolute',
bottom: 0
}
You should get something like this.
You may also want to add marginBottom: 50, to the last element inside the ScrollView if you'll put a solid element inside the bottom part.
I am rendering a TextInput in my react-native app which has a height of 100 px. The cursor for typing in the text is displayed in the center instead of the top in Android. The cursor appears fine for iOS. Below is a sketch which demonstrates the problem:
https://sketch.expo.io/SJVIk30ig
The TextInput is rendered using below code:
<TextInput style={{height: 100, padding: 5, backgroundColor: colorThemes.Blue.lightGrey}}
multiline={true}
value={this.state.value}
onChange={this.onTextInputChange}
underlineColorAndroid={'transparent'}
autoCorrect={true} autoFocus={true}
autoCapitalize={'sentences'}
/>
Duplication of this question
Set style property textAlignVertical to top on the TextInput
<TextInput style={{height: 100, padding: 5,
backgroundColor: colorThemes.Blue.lightGrey,
textAlignVertical: 'top'}}
multiline={true}
value={this.state.value}
onChange={this.onTextInputChange}
underlineColorAndroid={'transparent'}
autoCorrect={true} autoFocus={true}
autoCapitalize={'sentences'}
/>
Just add below style to your InputText, please have a look to the code
// This is the style for InputText
const styles = StyleSheet.create({
inputBox: {
fontSize: 13,
color: '#404040',
// Setting up TextInput height as 50 pixel.
height: 150,
// Set border width.
borderWidth: 1,
// Set border Hex Color Code Here.
borderColor: '#404040',
// Set border Radius.
borderRadius: 5,
//Set background color of Text Input.
backgroundColor: "#FFFFFF",
// this for setting cursor to top
textAlignVertical: 'top'
}
});
// here is the InputText , we are setting style
<TextInput
multiline={true}
style={styles.inputBox}
placeholder={'Type here...'}
value={this.state.text}
onChangeText={newText => this._sendChanges(newText)}
/>
Add textAlignVertical: 'top' into your <TextInput> styles
we can keep cursor position center using textAlign:'center'
inputstyle: {
color: colors.white
paddingLeft: 4,
textAlign: 'center',
}
Try setting lineHeight plus fontSize to keep the relation between box and text.
Try with the style below:
style={{height: 100, lineHeight: 100, fontSize: 100, padding: 5, backgroundColor: 'grey', }}
Of course, you need to use the size which fits you better.
Let me know if it works.
Thanks
I have a Touchablehighlight that I need to position absolute, but it becomes unclickable after I do it.
What could cause this? It functions like it should if I dont have the position set to absolute.
Solution was to change the order of the components.
What i originally had:
<TouchableHighLight><Text>Click me</Text></TouchableHighlight>
<View> .... </View>
This was the fix:
<View>...</View>
<TouchableHighLight><Text>Click me</Text></TouchableHighlight>
Dude just go and add zIndex : 1 to the view containing the buttons and boom you are done in most of the cases. Also note adding elevation adds shadow to android button and sometimes elevation may also be a issue if its added to parent and not added to child then the child button may not work.(Rare Case)
eg:
buttonContainers:
{
zIndex: 1,
alignSelf: 'flex-end',
position: 'absolute',
top:5,
right: 5,
height: 40,
borderWidth: 1,
justifyContent: 'center',
alignContent: 'center',
width: 80
},
SOLVED:
I faced this issue today. I have solved it.
Import TouchableOpacity from react-native-gesture-handler instead of react-native.
Before:
import {TouchableOpacity} from "react-native";
After:
import {TouchableOpacity} from 'react-native-gesture-handler'
use onPressIn instead of onPress
That made the area clickable!
I used TouchableOpacity inside an absolute view. The onPress function was not called after press it. But the opacity changed. I've tried all the above solutions, but none works.
My solutions is use onPressIn instead of onPress.
It seems like the inner action of Touchable* is weird in ReactNative when it's in an absolute view.
After trying everything for two hours, the solution I found was to change my button position.
Before ...
export default class Navbar extends Component {
componentDidMount() {
console.log(this.props);
}
render() {
return (
<View style={styles.content}>
<TouchableOpacity
onPress={this.props.openModal}
style={styles.containerButton}
>
<Text>New</Text>
</TouchableOpacity>
<Text style={styles.textCenter}>Remember me</Text>
</View>
);
}
}
const styles = StyleSheet.create({
content: {
paddingTop: 30,
paddingBottom: 10,
backgroundColor: '#81C04D',
flexDirection: 'row'
},
containerButton: {
position: 'absolute',
top: 30,
left: 8
},
textCenter: {
flex: 1,
textAlign: 'center',
fontWeight: 'bold'
}
});
After ...
export default class Navbar extends Component {
componentDidMount() {
console.log(this.props);
}
render() {
return (
<View style={styles.content}>
<Text style={styles.textCenter}>Remember me</Text>
<TouchableOpacity
onPress={this.props.openModal}
style={styles.containerButton}
>
<Text>New</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
content: {
paddingTop: 30,
paddingBottom: 10,
backgroundColor: '#81C04D',
flexDirection: 'row'
},
containerButton: {
position: 'absolute',
top: 30,
left: 8
},
textCenter: {
flex: 1,
textAlign: 'center',
fontWeight: 'bold'
}
});
It works!!!
My solutions is:
style:{
zIndex: 1,
position: 'absolute',
}
use
zIndex: 1 in view, it'll work.
<View style={{position : 'absolute', marginTop : 25, zIndex: 1}}>
More details can be found here :
How to use zIndex in react-native
For me, it works like:
import { TouchableOpacity } from 'react-native';
onPress, zIndex: 1, position: 'absolute'
One more solution.....
For me what worked was a combination of things....
import { TouchableOpacity } from 'react-native-gesture-handler'
and I WRAPPED my TouchableOpacity in a View.
before:
<TouchableOpacity onPress={()=> addCallback()}
style={styles.addButtonHolder}
>
<PlusCircle style={styles.addButton} width={70} height={70} stroke={"white"} strokeWidth={3}/>
</TouchableOpacity>
after:
<View style={styles.addButtonHolder}>
<TouchableOpacity onPress={()=> addCallback()}>
<PlusCircle style={styles.addButton} width={70} height={70} stroke={"white"} strokeWidth={3}/>
</TouchableOpacity>
</View>
StyleSheet:
const styles = StyleSheet.create({
addButtonHolder: {
position: 'absolute',
bottom: 70,
right: 10,
justifyContent: 'center',
alignItems: 'center',
zIndex: 1,
},
addButton: {
backgroundColor: '#b4cffa',
borderRadius: 35
}
})
This worked for me
import { TouchableOpacity } from 'react-native-gesture-handler'
and changed onPress to onPressIn
<TouchableOpacity onPressIn={() => console.log('clicked')}></TouchableOpacity>
My solution was to import TouchableHighlight from 'react-native'
It was originally imported from 'react-native-gesture-handler'
This props help to disable ScrollView to catch all touches and let child handles
keyboardShouldPersistTaps='always'
'always', the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps.
'handled', the keyboard will not dismiss automatically when the tap was handled by children of the scroll view (or captured by an ancestor).
https://reactnative.dev/docs/scrollview#keyboardshouldpersisttaps
When the position is absolute, TouchableHighlight or TouchableOpacity goes beneath from the surface. You have to add a higher zIndex value to the Container.
He guy, I took a long time to find out why this happens.
I tested a lot of the solution here. Two things worked for:
The first answer here
The second one is to add elevation and zIndex on the wrapper container
<View style={{ zIndex:0 }>
...
<View style={{ position: 'absulote', zIndex:10 ,elevation: 10 }}>
<TouchableHighLight><Text>Click me</Text></TouchableHighlight>
</View>
<View> .... </View>
...
</View>
If I am right, the reason for that is even that the button is shown, Android treats differently the layers of the Press events and you need to set a low level for the rest of your components. Defining a lower level for your wrapper component, all its children without this attribute will automatically inherit from the parent.
My problem was quite different, a backgroundColor style property was set on the container of my button. The color didn't work. I missed to remove this useless property. Finally, this backgroundColor was making an invisible sheet above my button. Removing it make it clickable again.
I faced the problem only on Android.
Add a zIndex to the component where you added position absolute. This solved the issue for me.
position: 'absolute',
zIndex: 1,
`
I ran into a similar problem, what I did was, I enclosed the whole thing into a new View and instead of giving 'absolute' position to
the TouchableOpacity, I gave it to the parent View. That made the
Opacity again clickable somehow. Here is the code snippet of before
and after
My Code before
<TouchableOpacity
onPress={() => {
console.log("hah");
}}
style={{
height: 50, width: 50,
backgroundColor: 'rgb(90,135,235)',
borderRadius: 25, alignItems: 'center',
justifyContent: 'center', right: 0,position:'absolute'
}}>
<Image source={require('../assets/images/element-acorn-white.webp')}
style={{ height: 30, width: 30, resizeMode: 'contain' }} />
</TouchableOpacity>
After Wrapping into a View with 'absolute'
<View style={{
alignItems: 'flex-end', position: 'absolute',
bottom: Dimensions.get('screen').height / 5
}}>
<TouchableOpacity
onPress={() => {
console.log("hah");
}}
style={{
height: 50, width: 50,
backgroundColor: 'rgb(90,135,235)',
borderRadius: 25, alignItems: 'center',
justifyContent: 'center', right: 0,
}}>
<Image source={require('../assets/images/element-acorn-white.webp')}
style={{ height: 30, width: 30, resizeMode: 'contain' }} />
</TouchableOpacity>
</View>