I'm working with a React Native form input field and would like to change the color and positioning of the clear button. The default clear button is too close in color to my background color.
<FloatingLabel
clearButtonMode={'always'}
style={styles.floatStyle}
inputStyle={styles.floatInput}
value={this.state.formData.email}
keyboardType={'email-address'}
autoCapitalize={'none'}
onChangeText={(value) => {
this.setState({
formData: {
...this.state.formData,
email: value
}
})
}}>Email</FloatingLabel>
Related
Hi All,
I am using https://github.com/gorhom/react-native-bottom-sheet
I need to increase the swipe-down area of the bottom sheet as highlighted below. Currently, it is only enabled on the handle indicator as I have set the enableContentPanningGesture={false} so that content inside the sheet is scrollable.
I tried adding the PanResponder on the highlighted partof the content as below :
const ActionSheetHeader = (props) => {
const pan = useRef(new Animated.ValueXY()).current;
const panResponder = useRef(
PanResponder.create({
onMoveShouldSetPanResponder: () => true, // detect pan down
onPanResponderRelease: () => {
sheetRef?.current.close();?
},
}),
).current;
return (
<View
{...panResponder.panHandlers}>
{/* Contents of header */}
</View>
)
<BottomSheetModal
snapPoints={['100%']}
name="MySheet"
onDismiss={onDismiss}
ref={sheetRef}
style={styles.container}
backgroundStyle={styles.backgroundStyle}
handleIndicatorStyle={styles.handleIndicatorStyle}
enableContentPanningGesture={false}
stackBehavior="push">
<BottomSheetView>
<ActionSheetHeader />
<AcionSheetContent /> // contents
</BottomSheetView>
</BottomSheetModal>
When I drag over the highlighted section, action sheet closes without any animation, is it possible to have the same behavior as we pull down the sheet from the handle Indicator?
Thanks.
I believe you can put that highlighted component inside the prop "handleComponent"
that way the whole highlighted section would be considered as the handle and should behave like expected
I have one input box, through which I am adding some text, on longpress I have to make the added fields as editable, how can I do that in react native.
If you want to make your filed clickable without seeing a buton then you should use touchableopacity.
Try this;
<TouchableOpacity onLongPress={this._onLongPress}>
<Input/>
</TouchableOpacity>
_onLongPress = () => {
this.setState({
makeEditableFunction: true
})
}
I am displaying content on the page on click of a drop-down button. I want to set some default value on the page irrespective of the dropdown button click and it should change when clicked on the drop-down button. Is there any way of doing it. Please Help.
My dropdown has 4 items. I want to display the first item as default. I have written an onclick event for it and for every onclick, I am fetching a service.
async onChangeText(apiurl) {
this.setState({
refreshing: false
});
let paramUrl;
this.state.data.forEach(eachUrl => {
if (apiurl === eachUrl.displayName) {
paramUrl = eachUrl.apiurl;
}
});
const res = await getResult(paramUrl);
this.setState({ listItems: res.data });
}
My dropdown looks like this
<Dropdown
data={this.state.data}
label='Select'
fontSize={15}
valueExtractor={({ displayName }) => displayName}
itemPadding={10}
onChangeText={this.onChangeText.bind(this)}
/>
<TextField
label={"Full Name"}
autoFocus={true}
lineWidth={3}
activeLineWidth={3}
baseColor={"red"}
labelTextStyle={{color:"grey"}}
textColor={"grey"}`enter code here`
/>
Currently labelTextStyle={{color:"black"}} does not work
If you are using the library "react-native-material-textfield", then to change the color of the label you need to use 'baseColor' property. By using this property, I resolved my issue to change the color of the label. Below is my code snippet,
<TextField
label = 'USERNAME/MOBILENO'
tintColor = '#51bc8a'
value = {username}
textColor = '#51bc8a'
baseColor = '#FFFFFF'
onChangeText = { (username) => this.setState({ username }) }
/>
The labelTextStyle prop does work properly. Check out this example Snack. Your issue here is that this prop does not control the color of the label itself. That gets controlled by the baseColor (when the field is not active) or by the tintColor prop (when the field is active). textColor controls the color of the text input, but not the label.
How do i change the background color, font size of my alert box in react native? I put my alert after a button is clicked. I don't know how to style this one, Thanks for the help
Alert.alert(
'Plate',
'Plate has been sent for printing!',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
Open android/app/src/main/res/values/styles.xml
Add <item name="colorAccent">#000000</item> inside <style> tag.
You will get this:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorAccent">#000000</item>
</style>
</resources>
This will change color over whole app (alerts, calendars, etc.)
You can use this library React-Native_DropDown-Alert. Its highly customizable library with predefined styles for differnet types of alerts. The code would go like this.
<View>
// !!! Make sure it's the last component in your document tree.
<DropdownAlert
ref={(ref) => this.dropdown = ref}
onClose={(data) => this.onClose(data)} />
</View>
// ...
handleRequestCallback(err, response) {
if (err != null) {
this.dropdown.alertWithType('error', 'Error', err)
}
}
// ...
onClose(data) {
// data = {type, title, message, action}
// action means how the alert was dismissed. returns: automatic, programmatic, tap, pan or cancel
}
// ...