React native paper Android 11 devices Textinput not showing - android

I am using reat natiev paper for outline textinput in my react native app so below is my code
const TextInput = ({...props }) => (
<View style={styles.container}>
<Input
style={styles.input}
selectionColor={colors.black}
underlineColor="transparent"
mode="outlined"
autoCapitalize="none"
activeOutlineColor={colors.black60}
{...props}
/>
</View>
);
const styles = StyleSheet.create({
container: {
width: '100%',
// marginBottom: 5,
},
input: {
backgroundColor: colors.white,
fontSize: commonTheme.TEXT_SIZE_DEFAULT,
fontFamily: globals.RobotoRegular,
},
});
export default TextInput;
here my main tsx file i am calling above textinput component
<TextInput
label="Email"
value={values.email}
keyboardType="email-address"
placeholder="Enter Address"
onChangeText={handleChange('email')}
onBlur={handleBlur('email')}
textContentType="emailAddress"
/>
when i run above code on Android 11 OS devices textinput not showing when i focus at that time using


I see the issue you are having might be because of the dark mode enabled on your device.
Often the design issues we face are because of the dark mode.
There are mostly two ways to handle the design in the case of dark mode.
Either you have to give support for both dark and light modes with your code
Or you do have to make force light mode for your app
To force the app to work in light mode even if the device has enabled the dark mode:
Add the following line of code inside your tag of the base application theme in the styles.xml file:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="android:forceDarkAllowed">false</item>
</style>
</resources>

Related

React native app has inverted colors on some phones

I start alpha tests of my reat natvie app and one of the testers reported to me that on his phone the app is looking like in dark mode:
I am really surprised because my application does not have any dark mode functionality implemented and should look like this:
Tester is using Xiaomi mi10 lite phone.
Most of my app screens has on top SafeAreaView with style like that:
container: {
flex: 1,
backgroundColor: colors.secondaryColor,
},
Where secondaryColor is '#abf0d1', sometimes backgroundColor is white like on second screenshot.
Does anyone have any idea what this color-inverting thing could be caused by?

This is because MIUI 12+ version has an advanced feature in Dark mode for Individual apps, This feature turns the Light theme app with no dark theme support to a Dark theme layout by inverting the layout colors.
If your app is only supporting Light theme you can prevent Force Dark mode by,
add a new property to your main AppTheme in res/values/ resources styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:forceDarkAllowed">false</item> // <-- add this
...

React native Picker onValueChange is not triggering with multiline picker item

I have added multiline support to the react native Picker by adding this
Android: Strings.xml
<style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="android:inputType">textMultiLine</item>
...
</style>
<Picker style={styles.picker}
selectedValue={selectedValue}
onValueChange={(itemValue, index) => {
console.log(index)
}
}
>
... <picker items> ...
</Picker>
Ref: How to style the React-native picker items to wrap the lengthy text?
but unfortunately onValueChange is not triggering after adding multiline.
How can I get the onValueChange event on multiline Picker.
Am using RN .59.x (RN Upgrading is not feasible for me :( ) and picker mode as DIALOG
..
Any other option to add the multiline support other than updating the strings.xml
Sample (single line): https://reactnative.dev/docs/picker

TextInput selectionColor property no changing color on android

After reading the React Native documentation I understood that selectionColor was used to change the color of the cursor instead of that primary default color of android system.
So I tried the following:
<TextInput selectionColor="#2E5BFF" {...props} autoCapitalize="none" autoCorrect={false} />
The problem is that on android devices it still gets that green default color of android, on the emulator tought its fine and is showing #2E5BFF color. My android devices both have android P.
Is there any known bug or am I doing something wrong here?
EDIT
I'm using Expo SDK 32.0.0

You can set colorControlActivated in styles.xml file.Like this
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/kio_turquoise</item>
<item name="colorPrimaryDark">#color/kio_hot_pink</item>
<!-- sets cursor color -->
<item name="colorControlActivated">#android:color/black</item>
</style>
because the backbone of the app is the native android application. For more information you can refer this article. It is very helpful.
React native on android styling the cursor

<TextInput
selectionColor={global.COLOR.DARKBLUE}
underlineColorAndroid={global.COLOR.ORANGE}
autoCapitalize="none" autoCorrect={false} />
you can try this

react native - android - Picker has underline

Have a problem with Picker style - it has underline like TextInput on Android, but underlineColorAndroid = 'transparent' or any other color isn't working.
I'm using Picker from NativeBase, and this Picker replaces ReactNative Picker. So here is my code. I've tryed wrapped Item with Input(NativeBase) or TextInput with underlineColorAndroid property, because only TextInput can have this prop, but has no luck. Changing styles of the components with bottomBorderColor doesn't give a result too. Can anyone help me please?
<View>
<Form>
<Item inlineLabel>
<Label>Region</Label>
<Picker
style={{ alignItems: 'flex-end', width: 200 }}
placeholder='...'
>
<Picker.Item label="..."/> //this first Item rendered as underlined
</Picker>
</Item>
</Form>
</View>

Add style={{borderColor:"transparent"}} to the <Item> tag.
<View>
<Form>
<Item inlineLabel style={{borderColor: "transparent"}}>
<Label>Region</Label>
<Picker
style={{ alignItems: 'flex-end', width: 200 }}
placeholder='...'
>
<Picker.Item label="..."/> //this first Item rendered as underlined
</Picker>
</Item>
</Form>
</View>

Is there a way to change the Android status bar color with React Native?

I just got started with React Native for Android, and I'm trying to figure out if there's a way to change the status bar color for Android...
Like this?

You can use React Native Status Bar(detailed description here). All you need to do is wrapping navigator with a view and adding a StatusBar component above it. Don't forget to import StatusBar from 'react-native' package.
<View>
<StatusBar
backgroundColor="blue"
barStyle="light-content"
/>
<Navigator
initialRoute={{statusBarHidden: true}}
renderScene={(route, navigator) =>
<View>
<StatusBar hidden={route.statusBarHidden} />
...
</View>
}
/>
</View>
One thing I've noticed is that you should style the parent View with flex:1, without it you'll just see a white blank screen. It's not mentioned in RN Documents though.

Yes you can:
import {StatusBar} from 'react-native';
componentDidMount() {
StatusBar.setBarStyle( 'light-content',true)
StatusBar.setBackgroundColor("#0996AE")
}

You can use react-native in-build StatusBar function
import {StatusBar} from 'react-native';
render() {
return <View>
<StatusBar
backgroundColor="#264d9b"
barStyle="light-content"
/>
... //Your code
</View>
}
reference:
https://facebook.github.io/react-native/docs/statusbar

I've made an npm package to control the StatusBar in android
https://www.npmjs.com/package/react-native-android-statusbar
The color changes do not reflect for versions before 21

There is no way currently to do that from JS. You can customize it by using a custom theme. Check out android/src/main/res/values/styles.xml file from your project (template is here: https://github.com/facebook/react-native/blob/master/local-cli/generator-android/templates/src/app/src/main/res/values/styles.xml) and read more here: https://developer.android.com/training/material/theme.html

Add this code on your header component
androidStatusBarColor="#34495e"

add color.xml in ..android/app/src/main/res/values and pate following code
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- color for the app bar and other primary UI elements -->
<color name="colorPrimary">#3F51B5</color>
<!-- a darker variant of the primary color, used for
the status bar (on Android 5.0+) and contextual app bars -->
<color name="colorPrimaryDark">#A52D53</color>
<!-- a secondary color for controls like checkboxes and text fields -->
<color name="colorAccent">#FF4081</color>
</resources>
copy and pate following code in ..android/app/src/main/res/values/styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>

If you are using Expo for React Native then here is the solution for setting Android Status Bar Color.
First of all, In your app.json file add the code:
{
"expo": {
"sdkVersion": "Your given Version",
"androidStatusBar": {
"backgroundColor": "#4e2ba1" (Your desirable android Status Bar Color before the app loads)
}
}
}
And then Go to Your Main Component or App.js, import 'StatusBar' from 'react-native'. Then add Following Code in return:
return(
<View style={{flex: 1}}> (Do not forget to style flex as 1)
<StatusBar translucent backgroundColor="rgba(0,0,0,0.2)"/>
<Your Code>
</View>
);
Here, we are setting the status bar color as Black but with 0.2 opacity. Your statusBar Color will be the same as your headerStyle background Color for Stack Navigator but a bit darker. For standard Android App, this is how the StatusBar color is set. Also, Make it translucent so that your app draws under the status Bar and looks nice.
It hope this works perfectly for you.

There is no exposed API for now. This will work only from Android 5.0.
Working on a bridge module to achieve the same. Will keep you posted

Just add the following code to your App.js file inside your class component.
componentDidMount(){
StatusBar.setBarStyle( 'light-content',true)
StatusBar.setBackgroundColor("Your color Hex-code here")
}
And add this to your import statements.
import {StatusBar} from 'react-native';

If you guys are using expo then just add this in the app.json
"androidStatusBar": {
"backgroundColor": "#ffffff",
"barStyle":"dark-content"
}
Refer: https://docs.expo.io/versions/latest/guides/configuring-statusbar/

Use backgroundColor Prop in the StatusBar Component
<StatusBar backgroundColor="#yourColor" />
Check docs more information : https://reactnative.dev/docs/statusbar

You can use react-native-navigation-bar-color this module to change NavigationBar, install it using npm i react-native-navigation-bar-color

Categories

Resources