I am building a app in react native.
i have several buttons with touchable opacity.
it contains text in touchable opacity.
but when I click on touchable opacity, the text is highlighted , and the touchable opacity is not pressed.
please help me.
Thank you.
Well, this is an incomum behavior. Since as you didn't share the code, I would suggest you take a look at the official documentation for check if you did it all right
https://reactnative.dev/docs/touchableopacity
Some example:
const onPress = () => console.log('button pressed');
<TouchableOpacity
style={{
alignItems: "center",
padding: 10,
backgroundColor: "#DDDDDD"
}}
onPress={onPress}
>
<Text>Press Here</Text>
</TouchableOpacity>
Related
I have a problem with adding shadow to my View Component.
here is the style object:
header: {
width: '95%',
height: '15%',
marginTop: 50,
alignSelf: 'center',
borderRadius: 20,
justifyContent: 'center',
flexDirection: 'row',
paddingHorizontal: 10,
elevation: 2,
},
and it looks like this :
and as soon as I add these style properties :
borderWidth: 1,
borderColor: 'white',
it looks better but not the best way:
what is my problem? can you help me ?
If you'd like to add a shadow to a <View/> component I would suggest you to use the shadow props. You can add a shadow to a view component by using the style properties like so:
// Just picked some random values for each of the properties.
const styles = StyleSheet.create({
header: {
shadowOffset: {
width: 20,
height: 10
},
shadowOpacity: 0.2,
shadowRadius: 20
},
});
Result of example code
I am not able to replicate the styling you have shown with just the code you have supplied. So I can't give you an answer as to why adding borderWidth and borderColor properties change your shadows. If you'd like me to dive into that, please supply the code of the entire component or even better an Expo snack.
What I did notice is that you used the elevation style property, which is will only add a shadow on Android (source). Additionally this property will also affect the z-order for overlapping views, so I would advise against using this if it is just for shadows.
Expo Snack Demo
BackgroundColor:white fixed the problem, thanks to #Ajay
use backgroundColor:'white' fixed the problem
I was trying to customize jitsi-meet. Here toolbar contains video mute, audio mute, and other buttons. How to place the container with blue background in the bottom of the screen?
If I remove height property then this whole thing is placed in the bottom of the screen but in this case I don't get spacing around items in toolbar.
toolbar: {
alignItems: 'flex-start',
flexDirection: 'column',
justifyContent: 'space-around',
marginBottom: 10,
paddingHorizontal: 5,
backgroundColor: 'dodgerblue',
height: '70%',
},
If I put height:'100%' it takes whole screen. Other elements are commented here. This screen in stacked top of a camera screen.
toolbar: {
flexDirection: 'row',
justifyContent: 'space-evenly',
marginBottom: 10,
paddingVertical: 5,
width:'100%',
backgroundColor: 'dodgerblue',
}
if you want to align the content in a horizontal row then you should give the flexDirection='row'. In react native default flexDirection is column so there is no need to mention it explicitly.
It's hard to understand without posting what you're fully rendering, but it seems like you need to wrap the toolbar view in a parent view, and fix the parent view to start at the bottom of the page through justifyContent: 'flex-end'
<View style={{justifyContent:'flex-end', flex:1}}>
<View style={{styles.toolbar}}>
</View>
</View>
Alternatively, you could set the parent view to flexDirection: 'column-reverse'.
Keyboard dismisses instantly when users tap on textInput
I have several screens containing textInput, but this only happens in one of them and only happens on Android platform.
The script I show is simple because I deleted all the other codes in order to test just the keyboard and textInput and the error is still there. However, I paste the same code of this script alone in a new project and it works fine.
Hope you can help me.
<View>
<Text>NAME</Text>
<TextInput
style={{
paddingVertical: 0,
textAlignVertical: 'center',
height: 30,
width: 60,
fontSize: 30,
color: '#E1E1F2',
borderBottomWidth: 1,
borderBottomColor: '#6B778A',
justifyContent: 'center',
}}
// onChangeText={(text => this.setState({ nameInput: text }))}
// value={this.state.nameInput}
placeholderTextColor={'#6B778A'}
underlineColorAndroid='transparent'
enablesReturnKeyAutomatically={true}
/>
</View>
Expected behavior:
Don't hide the keyboard when the user taps on textInput
Actual behavior:
When the user taps on an textInput the keyboard shows up but dismiss instantly and I've been tested all my plugins separately but could find the reason.
Screen record here
Full script in image
Problem
When you use fabric js for generating text components and convert then to SVG.
I want to see the problem and try reproduce and/or resolve
----->Please check first comment <-----
How to use demo to reproduce
Open Url of demo
Run it
Click on add text component it will add English test text component.
Now change the text by double click and paste this for example arabic word شريف
Open your browser inspector.
click on print to console button .
Expected result
To look like this
This is fixed in newer version. Update to v2.3.3 (latest) , your fabricjs version v1.5 is too old and its not maintained any more.
find latest here
fabric.js website
DEMO
var canvas = this.__canvas = new fabric.Canvas('c');
canvas.setDimensions({
width:400,height:400
})
text = new fabric.IText('شريف', {
left: 50,
top: 100,
fontFamily: 'arial black',
fill: '#333',
fontSize: 50
})
canvas.add(text);
console.log(text.toSVG());
function printtest(){
console.log(text.toSVG());
}
#c{
border:1px solid red;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick="printtest()">print console</button><br>
<canvas id="c"></canvas>
I'm searching a way to make an horizontal ListView or FlatList In React-native.
like the image below:
I tried to managed it with Flex but it's make me stranges results, and always with a vertical ListView
If you got any idea, let me know.
Regards,
The answer is to add the horizontal property set to true.
Yeah now it's described in the doc: https://reactnative.dev/docs/flatlist#horizontal
So obviously a FlatList is a Child of a ScrollView so he got the Horizontal Bool.
<FlatList
horizontal={true}
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
extraData={selectedId}
/>
Ciao
Thanks for the last answer, ListView is now deprecated.
solution with FlatList:
<FlatList
style={styles.videos_flatList}
horizontal={true}
data={data1}
renderItem={({item}) =>
<RowItem/>
}
ItemSeparatorComponent={() => {
return (
<View
style={{
height: "100%",
width: 20,
backgroundColor: "#CED0CE",
}}
/>
);
}}
keyExtractor={(item, index) => index.toString()}
/>
FlatList answers are above, but it is not the only way to make horizontal list in RN.
If you want to make display elements in React Native displayed in horizontal list the simplest way possible, you only need the Flex Direction as Row:
myElement: {
display: 'flex',
flexDirection: 'row',
},