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.
Related
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 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'm using react-konva in my webapp and on the desktop browser it works perfectly, but on the mobile browser the onClick does not work.
<Text
key={index}
index={index}
x={position[0]}
y={position[1]}
fontSize={unit}
width={unit}
text={mark}
fill={fill}
fontFamily={'Helvetica'}
align={'center'}
onClick={ (event) => {
alert("Some text...")
}}
/>
Is there a way to get this to work on mobile or do I need to find a replacement for react-konva text?
You have to use a special mobile event: onTap.
https://konvajs.github.io/docs/events/Mobile_Events.html
So in your case just use onClick and onTap together.
<Text
{...attrs}
onClick={this.handleClick}
onTap={this.handleClick}
/>
I'm looping through a native-base <Card dataArray={data} /> component rendering some components with Buttons. It was working alright (Listed all components as expected) but I soon added an onPress event to the Button and got an automatic onPress bug, weird enough it runs (clicks hence runs the bounded function) only once while components suppose to render with those buttons are many.
//- Inside constructor I bind testLogs
this.testLogs = this.testLogs(this);
//- Outside render...
testLogs(value) {
console.log(value);
}
//- Inside return of render()
<Card dataArray={devices}
renderRow={(theme) =>
<CardItem>
{(theme.picture) ?
<Thumbnail size={100} source={theme.picture} />:
<Thumbnail size={100} source={defaultImage} />
}
<Text style={{fontSize: 16}}> {theme.name} </Text>
<Button primary style={{marginRight: 10}}> Command </Button>
<Button success onPress={this.testLogs} > Edit </Button>
</CardItem>
}>
</Card>
I should also say all the rendered components don't run the onPress={this.testLogs} bound function when i click them after they render.
What could be triggering this? Or is loop rendering not the best approach to this?
Thank you.
Use onPress={this.testlogs.bind(this)}