react-native-navigation-bar-color is not working for me.Any other solution to change nav bar color on androi in react native?
You just need to update your android style, Go to android/app/src/main/res/values/styles.xml file
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:editTextBackground">#drawable/rn_edit_text_material</item>
<item name="android:navigationBarColor">#android:color/white</item>
<item name="android:windowLightNavigationBar" tools:targetApi="o_mr1">true</item>
</style>
Just use the StatusBar of react-native.
import {StatusBar} from 'react-native'
...
...
<StatusBar backgroundColor="blue" barStyle="light-content" />
https://reactnative.dev/docs/statusbar
go into this path ..android/app/src/main/res/values find styles.xml
and add this item :
<item name="android:navigationBarColor">#212e34</item>
this is my color code #212e34 change it what ever you want
Related
I added a splash screen when booting the app using https://www.npmjs.com/package/react-native-splash-screen#examples.
But before launching the splash screen, I can see a white screen. I can change that screen's colour using styles.xml but cannot remove it. Can anyone help me to remove that I am new to react-native?
Go to android/app/src/main/res/values/styles.xml
Disable the app's preview:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowDisablePreview">true</item>
</style>
</resources>
I want to make the blinking cursor thin in TextInput, how to do that? The normal width is like 3px, I want it to have 1px.
For android you can follow this steps:
step 1: Create editext_cursor.xml and place it under res->drawable directory.
android/app/src/main/res/drawable/editext_cursor.xml
step 2: inside editext_cursor.xml paste this:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:width="1dip" />
<solid android:color="#010101" />
</shape>
and here you can change the width to whatever you want.
step 3: add that line to android/app/src/main/res/values/styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:textColor">#000000</item>
<item name="android:textCursorDrawable">#drawable/editext_cursor</item> <-- add this
</style>
</resources>
step 4: rebuild your app
Because I wanted to use material input edit text, I had to change my style to
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
But my SnackBar style has changed, before it (which I was using AppCompat) my SnackBar was show in different mode, I mean, It came up from bottom and after a while it goes down, but now it is shown like a simple toast, it fade-in and then fade-out,
how can I use material component without having any change in my view styles?
Add following lines into styles.xml BaseTheme:
<resources>
<style name="BaseTheme" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
...
<item name="snackbarStyle">#style/Widget.MaterialComponents.Snackbar</item>
<item name="snackbarButtonStyle">#style/Widget.MaterialComponents.Button.TextButton.Snackbar</item>
<item name="snackbarTextViewStyle">#style/Widget.MaterialComponents.Snackbar.TextView</item>
</style>
</resources>
How do you change the colour of the react-native-image-picker choose from library screen?
I have added the following to styles.xml
<style name="AppTheme" parent="Theme.AppCompat">
<item name="android:actionBarStyle">#e7bd61</item>
<item name="android:colorPrimary">#e7bd61</item>
<item name="android:colorPrimaryDark">#e7bd61</item>
<item name="android:colorAccent">#e7bd61</item>
<item name="android:textColor">#e7bd61</item>
<item name="android:statusBarColor">#color/blue</item>
</style>
This code allows the Dialog to be styled however doesn't allow styling on the choose from library screen.
I tried to find the solution for ages , but it's still none working! Below is how I wrote:
<View style = {[ {flex: 0.7} ]}>
<Picker
selectedValue={this.state.selectedGender}
onValueChange={this.onValueChange.bind(this, 'selectedGender')}
>
<Item label="Please select gender" value=""/>
<Item label="Male" value="M" />
<Item label="Female" value="F" />
</Picker>
</View>
If you want to change the style of the picker items on Android, you have to change native code.
You'll have to add your style in android/app/src/main/res/values/styles.xml.
To change the picker container
Here I set, the background to null so there is not the down arrow on the left.
<style name="SpinnerStyle" parent="#android:style/Widget.Spinner">>
<item name="android:background">#null</item>
</style>
To change the selected item style
Here I set the items to be centered, the color font to be dark gray and the font size to 16.
<style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">>
<item name="android:gravity">center</item>
<item name="android:textColor">#373737</item>
<item name="android:textSize">16dp</item>
</style>
To change the drapdown items
Just as, the selected item, I want the dropdown items to have the same style.
<style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">>
<item name="android:gravity">center</item>
<item name="android:textColor">#373737</item>
<item name="android:textSize">16dp</item>
</style>
Finally
Once, you have set your styles for every element of the picker. You have to add the style to the general App theme.
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="android:spinnerStyle">#style/SpinnerStyle</item>
<item name="android:spinnerItemStyle">#style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">#style/SpinnerDropDownItem</item>
...
</style>
Hope it helps !