I am using:
"native-base": "^2.12.1",
"react-native": "0.59.5",
I have used checkbox and made a custom checkboxGroup and it was working. now I want to create a customCheckBox but it doesn't do anything,it's not getting checked, I even can not change it's color.
I tried to use it the simplest way possible as document says but it's still not working with a blue color.
here is what it looks like https://pasteboard.co/Ila4cfR.png
const CustomChBx = ({label, onPress, disabled, checked, textStyle}) => {
const {_chbx, _label, _wrapper} = styles;
return (
<View style={_wrapper}>
<Text style={[_label, textStyle]}>{label}</Text>
<CheckBox>
style={_chbx}
checked={checked}
disabled={disabled}
onPress={onPress}
color={Colors.accentColor}
</CheckBox>
</View>
);
};
i copied and pasted this code and then edited it, it's working !!!
<ListItem>
CheckBox checked={true} />
<Body>
<Text>Daily Stand Up</Text>
</Body>
</ListItem>
Related
I am unsure how to trigger an event in my TouchableOpacity component that will target the TextInput component. I'd just like to be able to allow the user to type in a multiline area and click a button when they are finished, so that they are able to save their text (similar to how the iOS Notes app functions).
<View>
<View>
<Text>Notes</Text>
{typing &&
<TouchableOpacity
onPress={() => {
//blur() the textinput here
}}
>
<Text>Done</Text>
</TouchableOpacity>
}
</View>
<View>
<TextInput
multiline={true}
textAlignVertical='top'
value={text}
onChangeText={(text) => {
}}
onFocus={setTyping(true)}
/>
</View>
</View>
If you only need to access the text inside the same file, store your text in state in your component.
const [text, setText] = useState('');
...
<TouchableOpacity
// not sure what you want to do with the text here, but it'll be available in the `text` variable
onPress={() => saveNote(text)}
...
<TextInput
onChangeText={newText => setText(newText)
// or more simply
onChangeText={setText}
...
/>
The text input will automatically blur when you touch the Touchable.
If you need the text available in other files, have a look into React Context or look up state management libraries for React Native.
The question is simple, <TextInput /> inside <Animated.View /> is being trigered on every onChangeText event. I want it to exit the animation only if Submit button is pressed. Code is below:
const InputBox = () => { return(
<Animated.View style={styles.inputContainer}
entering={SlideInRight}
exiting={
SlideOutRight
}
>
<TextInput
style={styles.textInput}
onChangeText = {(text) => setTypedText(text)}
/>
<Pressable
onPress={onSubmit}>
<Text>Submit</Text>
</Pressable>
</Animated.View>
)
Any ideas?
Edit: I realized that, when I directly use this <Animated.View/> inside render seems not any problem, but when I create the component dynamically with const InputBox=()=>{} the problem occurs. So the question is why? And how can I use this component which is created by using const InputBox=()=>....
I am trying to use keyboard avoiding view for not hiding my input element. I have tried multiple ways but its not working for me and elements still get hidden for some reason!
Can anyone help me figure out why?
As you see below the "notes" input section and the continue button is getting hidden, even though I'm using KeyboardAvoidingView component.
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<KeyboardAvoidingView behavior="padding" style={styles.wrapper}>
{steps.map((s, index) => {
return (
<SlideAnimation
style={styles.slide}
open={index == step}
key={s.title}
>
<Stack key={s.title} direction="column">
<AnimatedSizeText selected={index == step}>
{`${index + 1}. ${s.title}`}
</AnimatedSizeText>
{s.content}
</Stack>
</SlideAnimation>
);
})}
</KeyboardAvoidingView>
</TouchableWithoutFeedback>
Details:
"expo": "^45.0.6",
"react-native": "0.68.2",
Had to use behavior='position'
I have an Input from react native elements which looks like this
<Input
placeholderTextColor={constants.inputPlaceholderFontColor}
inputContainerStyle={{marginTop: 30, borderBottomColor: constants.dimmedFontColor}}
placeholder='Spieleranzahl'
keyboardType='numeric'
leftIconContainerStyle={{marginRight: 10, marginBottom: 8}}
leftIcon={
<Icon
name='user'
size={ 24 }
color= {constants.iconColor}/>
}
onChangeText={input => this.setState({numberOfPlayers: input})}
I tried to set the color by
style={{color: 'white'}}
inputStyle={{color: 'white'}}
inputContainerStyle={{color: 'white'}}
The documentation says: "This component inherits all native TextInput props that come with a standard React Native TextInput element, along with the following..." so I dont understand why the style property doesn't work because it works with the standard TextInput component.
Also, the documentation says about inputStyle: "style that will be passed to the style props of the React Native TextInput" so that should also work because this is the way to set color on the standard Text component.
Am I missing something?
I've created an example on snack.expo and inputStyle works perfectly on both iOS and Android. Most probably there is another issue, that's why I would recommend to reimplement my simple example and see if it works.
Update: Maybe only your placeholdertext is shown. I can't see the place in your code, where you pass the value prop to your input.
Demo:
https://snack.expo.io/Yunjp2ozw
Output:
Code:
export default function App() {
const [text, setText] = React.useState('Test');
return (
<View style={styles.container}>
<Input
value={text}
onChangeText={(text) => setText(text)}
inputStyle={{'color': 'red'}}
/>
</View>
);
}
Is there a way in React Native to set the style for standard elements without adding a style tag to each and every one? Like for example I want to alter the style for these:
<Text>This is test</Text>
<Text>This is also text</Text>
<Text>And so is this</Text>
As I understand it the only way to say a margin indent is to do this:
<Text style={styles.indentText}>This is test</Text>
<Text style={styles.indentText}>This is also text</Text>
<Text style={styles.indentText}>And so is this</Text>
In ordinary website CSS you can obviously just set some styles for all HTML elements without needing to add a class or ID to them. How is it done in React Native?
You can set an abstraction layer just for it:
IndentedText = React.createClass({
render: () {
<Text style={styles.indentText}>{this.props.text}</Text>
}
})
And then in your other components:
<IndentedText text={"This is a text"} />
<IndentedText text={"This is also a text"} />
<IndentedText text={"And so is this"} />