I'm using react-native-floating-label-input package and the label has a background colour if I click on it. Can you help me how I can remove it? I read the documentation and messaged a creator but to no avail.
<View style={{ padding: 50, flex: 1, backgroundColor: '#fff' }}>
<FloatingLabelInput
label={'label'}
value={cont}
onChangeText={value => setCont(value)}
/>
</View>
I tried to add backgroudnColor for labelStyle, but as you can see on the second picture the problem is with background colour behind the text.
label={'label'}
value={cont}
onChangeText={value => setCont(value)}
labelStyles={{ backgroundColor: '#ad8b8b', padding: 12 }}
If you check the source code and styling here: https://github.com/Cnilton/react-native-floating-label-input/blob/master/src/index.tsx#L361
you can find that the property labelStyles is merged with global style.
Try to provide labelStyles with the same background colour value as your input.
<View style={{ padding: 50, flex: 1, backgroundColor: '#fff' }}>
<FloatingLabelInput
label={'label'}
value={cont}
labelStyles={backgroundColor: '#fff'}
onChangeText={value => setCont(value)}
/>
</View>
Related
I am trying to make the corners of the bottom sheet provided by the react-native-bottom-sheet rounded by passing the style prop to it. But the rounded corners are being overlapped by something which I don't know. How do I make the the corners rounded?
Screenshot:
Code:
<BottomSheet
style={{
flex: 1,
borderWidth: 5,
borderColor: "red",
backgroundColor: "blue",
borderRadius: 50
}}
index={1}
ref={bottomSheetRef}
snapPoints={snapPoints}
onChange={handleSheetChange}
>
<View
style={{
backgroundColor: "lightgreen",
marginTop: 30,
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}
>
<View style={{ backgroundColor: "white" }}>
<Text>
I am back
</Text>
</View>
</View>
</BottomSheet>
This BottomSheet component is wrapped inside a View with flex: 1
Just added overflow: hidden to the BottomSheet's style prop and it worked.
I ran into the same problem but found another solution because I was using a Handler that was outside the BottomSheet so adding overflow: 'hidden' just hid my Handler.
Reading the code I realized that the style prop that is passed to BottomSheet is added to the code as containerStyle here, but the component in charge of defining the rounded corners is actually the BackgroundComponent which has the border radius in its styles.
So, in order to get a BottomSheet with a custom corner radius is better to add a separate backgroundComponent with all the modifications we want.
Like this:
function customBackground({ pointerEvents, style }) {
return (
<View
pointerEvents={pointerEvents}
style={[styles.bgContainer, style]}
/>
);
}
function renderSheet(){
return(
<BottomSheet
index={1}
ref={bottomSheetRef}
snapPoints={snapPoints}
onChange={handleSheetChange}
backgroundComponent={customBackground}
>
<View
style={{
backgroundColor: "lightgreen",
marginTop: 30,
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}
>
<View style={{ backgroundColor: "white" }}>
<Text>
I am back
</Text>
</View>
</View>
</BottomSheet>
;)
}
const styles = StyleSheet.create({
bgContainer: {
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
backgroundColor: "blue"
},
})
Everybody.
I am going to make one screen (top: flatList, bottom: some component), but the component should be posited at the bottom of the screen.
I tried several times like this, but I could not do that.
I tired:
bottom component style:
position: 'absolute',
bottom: 0,
padding: 20,
But not working for me and this component just hidden.
I am not sure why this happened.
Please help me...
Thanks
You can do something like this. The flatlist would be scrollable, you can place the view above or below based on your requirement.
//data=['aa','bb','cc']
<View style={{ flex: 1 }}>
<View style={{ backgroundColor: 'blue', height: 100, width: '100%' }} />
<FlatList
style={{ flexGrow: 0 }}
renderItem={({ item }) => (
<Text style={{ height: 100 }}>{item}</Text>
)}
data={data}
/>
<View
style={{
backgroundColor: 'red',
height: 100,
width: '100%',
marginTop: 'auto',
}}
/>
</View>
Explanation
flexGrow: 0 will make sure that the flatlist will use only available space otherwise it will grow and take the full screen.
marginTop: 'auto' will move the view to the bottom part this works for marginLeft and marginRight as well which can help when moving item to corners.
So the view at the bottom would take height:100 and full width and move to the bottom and flatlist would take the rest.
Output will be like below
Do you mean something like that?
<View style={{ flex: 1 }}>
<FlatList
style={{ flex: 1, .... }}
...
/>
<SomeComponent style={{height:80, width:'100%'}}>
...
</SomeComponent>
</View>
I want to start showing the text inside the picker component from the start without any padding applied. I researched but couldn't find a solution. I'm debugging in android.
My code:
<View style={[styles.pickerContainer]}>
<Picker
selectedValue={this.state.phoneCountryCode}
style={[styles.pickerText(text),{backgroundColor:'transparent', width: 80 }]}
itemStyle={{padding:0, backgroundColor:'yellow'}}
mode="dropdown"
onValueChange={(itemValue, itemIndex) =>
this.setState({ phoneCountryCode: itemValue })
}>
{Constants.CountryCodes.map((item, index) => (
<Picker.Item key={item} label={item.label} value={item.value} />
))}
</Picker>
</View>
Style:
pickerContainer:{
marginTop: 10,
position: 'absolute', left:0, bottom:0, zIndex:10,
},
pickerText:(text)=>({
color:'gray',
height: 40,
textAlign: 'left',
padding:0,
margin: 0,
}),
I had same issue with Picker component, it's quite tricky to style it correctly, I'm leaving some of my findings.
use negative marginLeft to remove padding on the left.
use width and wrapper view to manage padding on right.
use height to fix vertical padding.
Just in case you can afford one dependency check some third-party components like
this
it's highly customizable
PS: You may have figured it by now, but I'm still leaving a remark for anyone else.
Disclaimer: Works for Android and I do not know if it works for IOS.
In my case it was sufficient to set margin to -16 (as padding is set to 16 for picker) and to wrap picker into view with following things set in style: overflow: 'hidden', justifyContent: 'center', display: 'flex'.
Now it is possible to set up padding by setting up padding on view. BTW setting height on view also works for picker.
<View
style={{
width: '70%',
borderStyle: 'solid',
borderWidth: 1,
borderColor: 'black',
height: 20,
padding: 6,
overflow: 'hidden',
justifyContent: 'center',
display: 'flex',
}}>
<Picker
mode="dropdown"
style={{
backgroundColor: 'yellow',
margin: -16,
}}
onValueChange={(itemValue, itemIndex) => {}}>
<Picker.Item label="Java" value="java" style={{fontSize: 10}} />
<Picker.Item label="JavaScript" value="js" style={{fontSize: 10}} />
</Picker>
</View>
Hi am working on screens which involves bottom tab bar. For that I have implemented material bottom tab bar from react-navigation-material-bottom-tabs. Problem is my screen is going behind the bottom tab like below
The yellow border was given to see how UI would look like. The bottomline of screen is expected to be just above the bottom bar not behind it.
<SafeAreaView style={{backgroundColor: '#f3f3f5'}}>
<View
style={{
borderWidth: 3,
borderColor: 'yellow',
width: width,
height: height,
flexDirection: 'column-reverse',
}}>
<Header data={headerData} />
<LabelledView
rectanglebarfunc={() => this.rectanglebarfunc()}
height={height * 0.07}
rectanglebarbuttontext={'List Item 01'}
width={width}
color="white"
icolor="#ff007C"
textColr="#120F3F"
fontSize={16}
rectanglebarfunc={() => {}}
/>
<View
style={{
width: '100%',
height: 0.5,
backgroundColor: 'transparent',
}}
/>
<LabelledView
rectanglebarfunc={() => this.rectanglebarfunc()}
height={height * 0.07}
rectanglebarbuttontext={'List Item 00'}
width={width}
color="white"
icolor="#ff007C"
textColr="#120F3F"
fontSize={16}
rectanglebarfunc={() => {}}
/>
{/* <View
style={{
width: '90%',
height: '70%',
backgroundColor: 'red',
alignSelf: 'center',
marginVertical: 5,
}}></View> */}
</View>
</SafeAreaView>
Try adding marginBottom to safeAreaView and View :
<SafeAreaView style={{backgroundColor: '#f3f3f5' ,marginBottom:100}}>
<View
style={{
borderWidth: 3,
borderColor: 'yellow',
width: width,
height: height,
flexDirection: 'column-reverse',
marginBottom:100
}}>
try adjusting your marginBottom to check
Hope it helps. feel free for doubts
Will it be possible to set the color of Text to transparent and let the text alone inherit the parent views background color, not it's own background color!
<View style={{ backgroundColor: 'red' }}>
<Text style={{ color: 'transparent', backgroundColor: 'blue' }}>
Change text colour progressively
</Text>
</View>
CURRENT BEHAVIOR
Since the text color is transparent, it inherits it's own background color(blue), so no text will be visible.
EXPECTED BEHAVIOR
The text alone need to inherit the parent view's background colour(red).
My final goal by this is to implement an animation, where the text colour can be changed progressively. I am not sure of the behaviour in web or any, just curious if there is any possibility of achieving this.
Targeting Animation:
Thank You.
You can try implementing the following code:
<View style={{ backgroundColor: 'red' }}>
<View style={{ color: 'transparent' }}>
<Text style={{ backgroundColor: 'blue' }}> Change text colour progressively </Text>
</View>
</View>
render() {
const bgColor = 'red'; // try updating this color
return(
<View style={{backgroundColor: bgColor, padding: 15}}>
<View style={{backgroundColor: 'blue', padding: 10}}>
<Text style={{color: bgColor, fontSize: 18}}>
Change text color progressively
</Text>
</View>
</View>
);
}
Code in live action =>
https://snack.expo.io/HyZapc3qG