I'm doing a multiplatform app in react-native, but some layout properties are working in Android but not in IOS. After some search in our code, we figure out that the inline properties are the thing giving us throuble, like in that code:
<Button
style={principal_style.botoes}
backgroundColor='#e3e3e3'
onPress={() => this.logaUser() }>
<Text style={principal_style.btntxtstylewhite}>{this.state.txtEntrar}</Text>
</Button>
The backgroundColor propertie is completely ignored, and that problem repeats in every CSS propertie used that way, width, height, everhthing. Even if I put the properties inside the Style prop, it doesn't do anything, like in that code:
<View style={{flex: 1, justifyContent: 'center', }}>
<Text style={{color:'#ffffff', fontSize:12, textAlign: 'center', marginTop: 20,}}>V - 0.02</Text>
</View>
Now, about the external Stylesheet, they work perfectly, like the first code fragment, it has a style prop called principal_style.botoes, here is the code:
botoes: {
flex: 2,
backgroundColor: 'blue',
height:70,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginLeft: 40,
marginRight: 40,
borderRadius: 20,
marginBottom: 20
},
I don't know what else to do, maybe some react command, anything to work with, the inline style should work in IOS, right?
Please, give me some light about that.
EDIT 1
I could solve the first problem with that
<TouchableHighlight style={[styles.button,{ backgroundColor: '#f00'}]}
CREDITS: Answer from another thread
EDIT 2 - SOLUTION
I managed to solve the problems, turns out that the whole thing was caused by I mistake, the flex propertie was wrong, i had mixed it with other ways of height, and that made the whole text disappear, now everything is work perfectly, the advice that I can give to anyone ho gets that kind of problem is that everything works if you do the right way.
proper way to overwrite a external style to work in both platforms
<TouchableHighlight style={[styles.button,{ backgroundColor: '#f00'}]}
I forgot to mention that I was using the NATIVE-BASE button
Related
I'm working on a small react-native app. It's nearly only a container for showing my webapp, so nearly everthing is running cool.
The problem is, the user needs to rotate the screen on some of the webapp-sites. With my implementation this works very good on android, but not on iOS. The funny thing is, when I start the app on iOS via EXPO GO, it also works.
I've searched a lot but I can not find a solution for this. Do you have any idea how to change that behavior on iOS?
This is my App.js
import React from "react";
import { StyleSheet, View } from "react-native";
import WebView from 'react-native-webview';
const WEBSITE = 'https://www.google.com'
export default function App() {
return (
<View style={styles.container}>
<View style={{ width: '100%', height: '100%' }}>
<WebView
source={{ uri: WEBSITE }}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "flex-start",
alignItems: "flex-start",
},
});
I would first check your xcode project settings and ensure that the orientations you are looking for are enabled. If you open up xcode and check the orientations you should have all the orientations selected that you want to support. The project below has only portrait enabled therefore I'd suggest you enable the landscape orientations and hopefully this should resolve your problem.
Any idea why ScrollView + multiline TextInput + KeyboardAvoidingView feels really sluggish? I'm using react-navigation with the react-native-screen for the native modal look. The screenshot gif below is taken on emulator but it behave similarly even on the real device (notice that there is a flash of blue background just before keyboard showed up)
My code looks something like (I set the KeyboardAvoidingView background to pink so it's easy to spot and ScrollView background is set to blue
<KeyboardAvoidingView behavior={'padding'} style={{flex: 1, backgroundColor: 'pink'}} keyboardVerticalOffset={48}>
<View style={{flex: 1}}>
<View style={styles.header}>
<Text>{date}</Text>
<Button title="Delete"/>
<Button title="Save"/>
</View>
<ScrollView keyboardDismissMode={'interactive'} style={{flex:1, backgroundColor: 'blue'}}>
<TextInput onChangeText={(text) => setNote(text)}
placeholder='Note'
value={note}
multiline={true}
scrollEnabled={false}
style={{flex: 1, backgroundColor: '#fff'}}
/>
</ScrollView>
</View>
</KeyboardAvoidingView>
I'm also using react-native-elements, react-navigation+react-native-screens for the native modal look
PS - I tried not using ScrollView and simply using TextInput with scrollable={true} which seems to be working but the problem with that is I can't dismiss the keyboard once the keyboard is shown
I am developing a react-native app using expo.
On my signIn screen I do have two TextInputs (with textContentType username and password).
I do have multiple places where I'm calling Keyboard.dismiss() (from a wrapping Touchable, from other Buttons etc.) which works fine for most usecases.
My problem is that after I successfully used password autofill on iOS (via fingerprint) first the keyboard hides and reshows automatically (fireing all the usual keyboard events) which looks strange but is acceptable but afterwards the keyboard is no longer reacting to any Keyboard.dismiss() calls untill I focus another TextInput.
There seems to be a similar issue with the "use strong password" keyboard overlay.
Here my versions:
"expo": "^34.0.1",
"react": "16.8.3",
"react-dom": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
Running in the Expo client on iOS 13.2.3
Thank you in advance for any help.
Edit:
I stripped down the problem to the most basic version. The dismiss button works fine untill I use the password autofill on the iOS device.
https://github.com/SebastianRoese/tryouts/tree/master/keyboard-dismiss-problem
import React from 'react'
import { View, Button, TextInput, StyleSheet, Keyboard } from 'react-native'
const App = () => {
return (
<View style={styles.screen}>
<TextInput style={styles.textinput} textContentType="username" />
<TextInput style={styles.textinput} secureTextEntry textContentType="password" />
<Button title="Dismiss Keyboard" onPress={() => Keyboard.dismiss()} />
</View>
)
}
const styles = StyleSheet.create({
screen: {
width: '100%',
height: '100%',
paddingVertical: '15%',
backgroundColor: '#1e1e1e',
alignItems: 'center',
},
textinput: {
marginVertical: 10,
padding: 10,
width: '70%',
height: 40,
backgroundColor: '#ababab',
},
})
export default App
After upgrading from Expo SDK 34 to Expo SDK 38 the problem is no longer reproducable.
Seems like it was an issue in al least Expo SDK Version 34.
I am creating a simple video app using the react native for IOS. But the problem is that when i play the video the video is played in the full screen mode, even if I set the property allowsInlineMediaPlayback to true but still no impression. Please can anyone tell why we use the allowsInlineMediaPlayback property and how to enable the inline video mode in IOS?
Even i added the webkit-playsinline attribute to the HTML video tag as well but which is documented (as following) on the react native website but still not working.
NOTE:
In order for video to play inline, not only does this property need to
be set to true, but the video element in the HTML document must also
include the webkit-playsinline attribute.
Please take a look at the following links:
Documentation Reference For WebView.allowsInlineMediaPlayback.
Working Source Code.
Thanks !!!
Simply remove webkit prefix from webkit-playsinline because webkit prefix is no longer required nor it is supported.
Following is the correct and modified code snippet of your code you shared in the question:
import React, { Component } from 'react';
import { WebView, View } from 'react-native';
export default class MyVideoApp extends React.Component{
render(){
return(
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
}}>
<WebView
source={{
html: '<video playsinline controls autoplay src="https://www.w3schools.com/html/mov_bbb.mp4" ></video>'
}}
useWebKit={true}
originWhitelist={['*']}
allowsInlineMediaPlayback={true}
style={{
height: 600,
width: 400,
}}/>
</View>
);
}
}
enter "playsInline" in your video tag
I am facing something weird issue with React-Native's <Text/> component in iOS.
I wanted to apply borderBottomWidth style into <Text/> component but it did NOT work. However, the borderWidth option worked.
Worked
<Text style={{borderWidth:1}}> React Native </Text>
NOT Worked
<Text style={{borderBottomWidth:1}}> React Native </Text>
Is there any way to only apply bottom level border into the <Text/> component?
Thank you!
Note:
I am aware of following mentioned approaches in order to achieve this but in my case, I required to apply the style only to the <Text/> component.
We can try wrapping <View/> to the <Text/> and apply borderBottomWidth style to the <View/>. (borderBottomWidth works fine with <View/>)
Adding such <View/> just below to the <Text/> component which can look like a line.
Even though borderBottom doesn't work on the Text component, it did work for me on the TextInput component, just set editable to false and set the value to your desired text as so...
<TextInput
style={styles.textInput}
editable={false}
value={'My Text'}/>
const styles = StyleSheet.create({
textInput: {
borderBottomColor: 'black',
borderBottomWidth: 1,
}
});
This isn't currently possible. See the following RN issue: https://github.com/facebook/react-native/issues/29 and this ticket on Product Pains: https://productpains.com/post/react-native/add-borderwidth-left-right-top-bottom-to-textinput-/
We can now use :
const styles = StyleSheet.create({
textZone: {
borderTopRightRadius: 10,
borderTopLeftRadius: 10,
borderBottomRightRadius: 10,
borderBottomLeftRadius: 10
},
})