What am I trying to achieve
I am currently facing a styling issue at the TextInput from react-native.
What I am trying to achieve is to display an icon within the TextInput.
Current situation
Creating a TextInput with the following code.
<TextInput
placeholder={translationStrings.searchPlaceHolder}
style={styles.searchStyling}
/>
This looks like below:
Current situation
What am I trying to achieve:
Wished situation
Does someone have any idea how to do this?
This is how ive achieved it
searchBar = () => {
return (
<View style={{ flexDirection:'row' , alignItems:'center'}}>
<TextInput
placeholder="Search your issues "
keyboardShouldPersistTaps
onChangeText={text => this.props.chnageInputText(text.toLowerCase())}
/>
<Image
style={faqStyles.imT}
source={require('../assets/images/maglass1.png')}
/>
</View>
);
};
This is how ive made a custom searchbar by wrapping an image and textInput in a View >ill always prefer using custom made components rather than libraries external. Try this and hope it helps. feel free for doubts.
Please see the below image, this is what ive achieved. ive reversed the elemnts like text input and magnifying glass image for you.
import {Item,Input} from 'native-base'
<Item>
<Input>
</Input>
<TouchableOpacity>
<Icon></Icon>
</TouchableOpacity>
</Item>
using native-base use input instead of textInput.
Otherwise just use a view with flexDirection:'row'
Related
I'm using the Modal built into React Native (and specifically I'm using the React Native Paper variant). By default this seems to open in the middle of the screen. However if you're doing some text input in the Modal then it would be more useful if it opened either at the top of the screen, or was aware of the keyboard. However I can't find a way to get this to work.
My (simplified) modal code is:
<Portal>
<Modal visible={visibleModalNew} onDismiss={closeModalNew} contentContainerStyle={styles.modalContainer} >
<View>
<Title>New</Title>
<View>
<TextInput
mode="outlined"
label="Data"
style={{alignSelf:'center', width:'95%'}}
defaultValue={newData}
onChangeText={newData=> setNewData(newData)}
onSubmitEditing={() => handleDone()}
/>
<Button onPress={() => doSomething()}>Do something</Button>
</View>
</View>
</Modal>
</Portal>
Ah, figured out a way round. I wrapped the modal in a KeyboardAwareView, removed the visible prop from the modal, and then wrapped it all in a conditional render and put the visible prop there instead. Seems to work as hoped.
I am adding two props (textProp & imgProp) to my custom component, but I keep on getting this error <Image> component cant contain children. This is what I have soo far
function TextImg(textprop, imgprop) {
return(
<div>
<div>
<Text>{textprop.text}</Text>
</div>
<div>
<Image source={imgprop.imageUri}>!</Image>
</div>
</div>
);
}
Can anyone help me regarding this, Thanks!
Images (img) are considered empty elements and are self-closing, and required to be per the html spec.
https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
The react native Image has the same restriction.
They can't wrap anything or have any children nodes. The "!" is the issue.
<Image source={imgprop.imageUri}>!</Image>
Try instead
<Image source={imgprop.imageUri} />
If you need to display an "!" then it'll have to be outside the image.
if you need to show "!" in image,
Try
<View>
<Image source={img} />
<Text
style={{
position: "absolute",
// some stylng
}}
>
!
</Text>
</View>
I am new to React Native, suppose I have the following:
<View id='z'>
<Input id='x'/>
<Button id='y'/>
</View>
In jQuery, I would:
$('#x').val('xxxx');
console.log($('#z Input').title);
How can I do this in React Native way? How to give the instance a handle so I can grab it and get many thing from it?
Please refer this
if you only need the value, try this way,
<View>
<Input onChangeText={text=>this.setState({inputBox:text})} />
<Button onPress={()=>console.log("value",this.state.inputBox)}/>
</View>
I want to create a box of Terms and conditions in which data can be scrolled. I tried it using TextInput like below but it doesn't scrolls.
<TextInput
multiline={true}
value={data}
editable={false}
scrollEnabled={true}
style={styles.termsAndConditionsStyle}
/>
second alternative
I also tried it this way, it works but it gives me a yellow screen warning which says - You are binding a method component to the component. React does this for you automatically in a high performance way, so you can safely remove this call. See ScrollView.
<ScrollView style={styles.termsAndConditionsStyle}>
<Text>
// some large text
</Text>
</ScrollView>
Solution - Actually I imported ScrollView from react-native-gesture-handler instead of react-native
Did you try <ScrollView>?.
You can use this to create scrolling functionality.
well its pretty simple, just warp your components in <ScrollView> ... </ScrollView>and
style it as per your need.
if height of components together exceeds for <ScrollView>, it becomes scrollable.
see docs at react native
EDIT:
Its importing mistake, import scrollview from react-native rather than react-native-gesture-handler
render() {
return(
<View style={styles.container}>
<ScrollView>
<Text>
Add your text
</Text>
</ScrollView>
</View>
);
}
EDIT:
Its importing mistake, import scrollview from react-native rather than react-native-gesture-handler
I am trying to run a function on press of a picture in react native.
<Image source={mysource} onPress={()=>{Alert.alert("hello")}} />
Am I supposed to do it like this? It doesnt work. I think I should wrap the image by button tags but I am not sure how to do it. Is there any best way to do this?
Yes you need to wrap inside the Touchable property like this:
<TouchableHighlight onPress={() => {Alert.alert("hello")}}>
<Image source={mysource} />
</TouchableHighlight>