This is what I have done so far:
I want the text input to extent until reaches end of box.
Here's my code:
<View style={{ flexDirection: 'row' }} >
<Switch style={styles.switch}
trackColor={{true: "#36d79a", false: 'grey'}}
thumbColor={{true: "#36d79a", false: 'grey'}}
/>
<Input right placeholder="Type your custom question here." iconContent=
{<Block />}
/>
</View>
To fill space along the main axis of flexboxes, apply the flex property with a number value to flex children. The number specifies the proportions of how the available space is distributed among the flex children. See the docs on flexbox for details.
In your case, you would specify flex: 1 only for the <Input /> meaning that this component alone is allowed to fill the rest of the space. I've created this React Native & MUI Codesandbox to demonstrate it.
<View style={{ flexDirection: 'row' }} >
<Switch style={styles.switch}
trackColor={{true: "#36d79a", false: 'grey'}}
thumbColor={{true: "#36d79a", false: 'grey'}}
/>
<Input style={{ flex: 1 }} right placeholder="Type your custom question here." iconContent=
{<Block />}
/>
</View>
Add justifyContent: 'space-between' to your main View.
Alternatively, you can always use placeholder views:
<View style={{ flex: 1 }}. You would put that placeholder between the Switch and the Input.
Related
If I have another text input on the same screen with react-native-gifted-chat component, the keyboard won't work correctly. It will appear in a sec then be dismissed immediately. Happens on both Android and IOS, physical devices and emulator.
I handled keyboard by myself, inside a KeyboardAvoidingView
Demo:
Here my code
<View style={styles.container}>
<View style={styles.container}>
{renderVideo()}
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : undefined}
style={{ flex: 1, justifyContent: "flex-end" }}
>
<View style={{ height: 350 }}>
<GiftedChat
textInputProps={{ onFocus: onFocusHandler, onBlur: onBlurHandler }} //
isKeyboardInternallyHandled={false}
wrapInSafeArea={false}
keyboardShouldPersistTaps="handled"
onSend={onSendMessage}
alwaysShowSend
messages={messages}
infiniteScroll
scrollToBottom={false}
inverted
/>
</View>
</KeyboardAvoidingView>
</View>
<AlertModal ref={alertRef} /> // This modal contain another input
</View>
Need some help making Keyboard for second text input works fine
(I'm testing on Android if it matters)
I'm using the component KeyboardAwareScrollView to make the inputs visible while the soft keyboard is open. I have two inputs, one below the other, and when I press the top one, the soft keyboard does make sure it's visible but also hides the one below.
Is there a way to make sure that when the keyboard is open, the two inputs will remain visible, even if the user pressed the one at the top?
My code:
<KeyboardAwareScrollView scrollEnabled={false} resetScrollToCoords={{ x: 0, y: 0 }}>
<Image {...this.image.header} style={{ height: 400, width: '100%' }} />
<View>
<TextInput style={{ backgroundColor: 'red' }} />
<TextInput style={{ backgroundColor: 'blue' }} />
</View>
</KeyboardAwareScrollView>
I am copying this answer of boredgames.
<TextInput
placeholder = "FirstTextInput"
returnKeyType = { "next" }
onSubmitEditing={() => { this.secondTextInput.focus(); }}
blurOnSubmit={false}
/>
<TextInput
ref={(input) => { this.secondTextInput = input; }}
placeholder = "secondTextInput"
/>
I want to create two buttons in same line separately.I used flex=2 but it's not working.How can i fix that?
<View style={{ flex: 2,flexDirection: "row" ,marginLeft:20}}>
<BtnDft h={40} w={100} name={ "Update"} />
<BtnDft h={40} w={100} name={ "Log out"} />
</View>
Remove flex: 2
{ flexDirection: "row" ,marginLeft: 20, justifyContent: 'space-evenly' }
change the position of the buttons using justifyContent, Available options are flex-start, center, flex-end, space-around, space-between and space-evenly.
I saw one example few months ago where was added extra style to the same element like this:
<Button style={ styles.button && backgroundColor: '#222222'}>
<Text> Learn more </Text>
</Button>
But can't remember how was the right syntax. It's not working now. How can this code be fixed?
You have couple of options.
Option 1:
You can spread the object and add the desired one after.
<Button style={{ ...styles.button, backgroundColor: '#222222'}}>
<Text> Learn more </Text>
</Button>
Option 2:
You can use Object.assign() to clone and add more properties to your object.
<Button style={Object.assign({}, styles.button, { backgroundColor: '#222222'})}>
<Text> Learn more </Text>
</Button>
Option 3:
style prop can have an array of objects.
<Button style={[styles.button, { backgroundColor: '#222222'}]}>
<Text> Learn more </Text>
</Button>
You can do it by passing an array of styles
<Button style={[styles.button, { backgroundColor: 'white' }]} />
I want to put Search Input between two View border,but half input hides behind another View.
Click Here To Show Image.
There are two views. One View's backgroundColor is purple and another view's backgroundColor is white.And half Input type is hide behind another view.
<Container>
<Header style={{ backgroundColor: "#635DB7" }}>
<Left>
<Button
transparent
onPress={() => this.props.navigation.navigate("DrawerOpen")}
>
<Icon name="ios-menu" />
</Button>
</Left>
<Right />
</Header>
<View style={{flex:1,zIndex:2}}>
<View style={{height:192,backgroundColor: "#635DB7"}}>
<View style={{position:'absolute',opacity: 1,flex:1,flexDirection:"row",marginTop:160}}>
<Input style={{flexDirection:"row",borderRadius:20,marginLeft:30,marginRight:30,backgroundColor:"#434353", zIndex: 2,opacity: 1}} placeholder="Search" />
</View>
</View>
<View style={{height:448,backgroundColor: "#ffffff",zIndex:1}}>
</View>
</View>
</Container>
Try to put the search bar as a last item in the container, and with absolute position. If that does not work, then you might have hit a bug in RN android, which does not support overflow:
https://github.com/facebook/react-native/issues/6802
https://github.com/facebook/react-native/issues/3198