Elements such as <Button/> and <TextInput/> get rendered with default styles on Android but on iOS they are pretty much unstyled. Is there a way to get platform styles (e.g. borders and padding) applied on iOS without reproducing them in CSS?
For example
<View style={{flex:1, justifyContent: 'center'}}>
<Text>Please sign in</Text>
<TextInput placeholder="Username"/>
<TextInput placeholder="Password"/>
<Button onPress={() => {}} title="Sign in"/>
</View>
https://github.com/tombenner/nui
to apply them you can use platform.select
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.
I have used React with MUI and starting to explore React Native. I have read the documentation but can not seem to find this basic example.
How do I create a list of buttons(button group) with icons to the right?
I would like to do something similar to MUI like <Button endIcon={<ArrowRight />} />
but achieve the Native iOS look and feel.
Like the Settings app on iOS:
| General —-——————————————- —> |
| Control Center —————————- —> |
| Display & Brightness ———— —> |
Is there a way to do this without coding the entire thing from scratch?
There is probably a third party package for this somwhere, but my advice would be to use SectionList from react-native and RectButton from react-native-gesture-handler to get the native ios/android feel.
You can use FlatList with custom buttons and apply styles to it.
https://reactnative.dev/docs/flatlist
Example of button content:
<View style={{flexDirection: 'row'}}>
<View style={{flex: 0.3}}>Icon here</View>
<View style={{flex: 0.5}}><Text>Text here</Text></View>
<View style={{flex: 0.2, alignItems: 'flex-end'}}>Icon here</View>
</View>
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
The fixed header is scrolling after keyboard is open on iOS device. Is there any possibility to have fixed header after keyboard is open? I do not want to have header scrolling with the content.
Here is explained similar problem:
https://medium.com/#im_rahul/safari-and-position-fixed-978122be5f29
I am facing the problem in the React project using Cordova.
Thank you very much for your help.
use keyboardAvoidingView from 'react-native'
docs
import {
KeyboardAvoidingView
} from 'react-native';
<KeyboardAvoidingView behavior="padding" style={styles.container}>
<View style={styles.inputContainer}>
<TextInput
returnKeyType="next"
placeholder="Mobile No."
placeholderTextColor="powderblue"
keyboardType="number-pad"
onSubmitEditing={() => this.passwordInput.focus()}
style={styles.input}
onChangeText={(value) => this.setState({mobileno:value})}
value={this.state.mobileno}
/>
<TextInput
returnKeyType="go"
placeholder="Password"
placeholderTextColor="powderblue"
style={styles.input}
secureTextEntry
ref={input => (this.passwordInput = input)}
onChangeText={(value) => this.setState({pssd:value})}
value={this.state.pssd}
/>
</View>
</KeyboardAvoidingView>
If you are hiding status bar the KeyboardAvoiding will push everything including the header to top, it’s a bug of KeyboardAvoidingView in react native.
To make your header fixed while keyboard is shown, make your statusbar hidden=false
Description
I’m developing a react native application with a three-column keyboard. I’ve based the keyboard on a vertical flex layout. Each row in the keyboard is configured with an horizontal flex layout. Buttons and the horizontal and vertical separators are simple views.
On particular conditions it seems that the flex layout cannot correctly size views.
For instance see the pictures below for iPhone 6 screen size: the three buttons are all equally sized to 123.5 width and a 0.5 blank space is clearly visible between the second and the third column.
Do you guys have any hypothesis on why does this happen?
Reproduction
I’ve put some sample code here: https://rnplay.org/apps/Vl7nVg
In this example however the problem does NOT seem to appear but it uses react v0.31.
Trying to run the sample locally with v0.35 causes the problem.
Additional Information
React Native version: 0.35
Platform: iOS
Operating System: MacOS
Remove the last line verticalLine style from each row.
<View style={styles.verticalLine}/>
Currently your each row is like this.
<View style={styles.row}>
<View style={styles.verticalLine}/>
<View style={styles.button}>
<Text style={styles.buttonText}>1</Text>
</View>
<View style={styles.verticalLine}/>
<View style={styles.button}>
<Text style={styles.buttonText}>2</Text>
</View>
<View style={styles.verticalLine}/>
<View style={styles.button}>
<Text style={styles.buttonText}>3</Text>
</View>
<View style={styles.verticalLine}/>
</View>
After removing it becomes,
<View style={styles.row}>
<View style={styles.verticalLine}/>
<View style={styles.button}>
<Text style={styles.buttonText}>1</Text>
</View>
<View style={styles.verticalLine}/>
<View style={styles.button}>
<Text style={styles.buttonText}>2</Text>
</View>
<View style={styles.verticalLine}/>
<View style={styles.button}>
<Text style={styles.buttonText}>3</Text>
</View>
</View>
This change removed the extra blank space.
Note:
Not sure why this line was causing an issue. May be some issue with react-native 0.35.0 iOS implementation. Your code worked fine in Android.