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>
Related
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>
On my app, most of the app has a backgroundColor set to white, so, I want to set my statusbar to black, according to the documentation this should work:
<StatusBar barStyle={'dark-content'} translucent={true} />
but as you can see in the image:
now if I just put a green background to check the statusbar I get this:
What can I do to solve this issue?
Try to add the backgroundColor prop and change the color u need,
:)
<StatusBar backgroundColor="#000000" barStyle="light-content" />
Putting
<StatusBar backgroundColor="#000000" barStyle="light-content" />
worked for me
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
I need to remove the border as I marked in the image.
I am using react-native & native-base tabs. I need to remove the bottom border of tabs.
<Tabs>
<Tab heading="Tab1">
<Tab1 />
</Tab>
<Tab heading="Tab2">
<Tab2 />
</Tab>
<Tab heading="Tab3">
<Tab3 />
</Tab>
</Tabs>
I found the solution,
Need to implement ScrollableTab, Then
<ScrollableTab style={{ borderWidth: 0}}>
For everyone still trying to remove the border. This is the problem due to elevation.
Add this to Tabs Tag:
<Tabs tabContainerStyle={{elevation: 0}}>
...
</Tabs>
Try this way <Tabs tabContainerStyle={{ borderBottomWidth: 0 }}>
Try:
<ScrollableTab style={{borderBottomWidth: 0, backgroundColor: 'some_color'}}
/>
or
<TabHeading style={{
backgroundColor: 'some_color',
borderBottomWidth: 0,
}}>
or add below prop/attribute to component:
tabBarUnderlineStyle={{backgroundColor: '#eff2f8'}}
Hi I added a borderWidth: 0px to the styling and this worked for me,
Good Luck!
I have the following index.xml
<Alloy>
<Window id="container" title="My App">
<View backgroundImage="/myBackground.jpg">
<Label backgroundColor='rgba(0,0,0,0.5)' text="Hello world!"></Label>
</View>
</Window>
</Alloy>
As the documentation says, that should provide me with a Hello World text with a semi-transparent black background. In iOS works fine but it shows a totally transparent background on Android.
I tried putting it in a separate tss file but still the same issue. Any ideas out there?
For some reason android compilations in Titanium don't work well with rgba() syntax for colors. Try the Hex version instead:
<Alloy>
<Window id="container" title="My App">
<View backgroundImage="/myBackground.jpg">
<Label backgroundColor='#50000000' text="Hello world!"></Label>
</View>
</Window>
</Alloy>