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>
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>
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'
<View>
<Text>
{/* Adding notification if exists otherwise ignore */}
{post.hasNotification ? post.notifications: ''}
</Text>
</View>
How could I wrap a View component around post.notifications? When I do this I get an error Nesting View withing Text is not currently supported. I need to wrap it with a View component so I can style it.
You can't use View component inside Text component. Try this,
<View>
{post.hasNotification ? <View><Text>post.notifications</Text></View> : ' '}
</View>
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>