I have a horizontal view:
<View style={{flex: 1, flexDirection: 'row'}}>
<Text style={styles.bottomTextSignIn}>I'm already a member, </Text>
<Button
title="Sign In"
onPress={() => navigation.navigate("Login")}
/>
</View>
Im trying to make the the button look like the text, no styling, so it looks like its part of the sentence "I'm already a member, Sign In"
At the moment its a blue button next to the text. I tried changing the button colour to white which leaves a shadow around it. Is there a way to remove the styling for the button? or another way?
The button component is a "touchable/pressable" component with style. link
I think you are looking for pressable component.
<Pressable onPress={() => alert('hey')}>
<Text>I'm pressable!</Text>
</Pressable>
You can simply replace the button tag with and handle on onPress event on the text and different style to the text from the first one
Related
In react-native project I have next button:
import Icon from 'react-native-vector-icons/FontAwesome';
<Icon.Button
name='chevron-down'
backgroundColor='transparent'
color='#000000'
padding={0}
size={30}
onPress={() => setIsCollapsed(false)}
/>
Everything is fine except one thing - on button press for a fraction of a second, appears black square round the button element. How can I remove this styling element?
Wrap it inside TouchableOpacity and pass onPress method on touchable opacity's onPress props
Example :
<TouchableOpacity onPress={() => setIsCollapsed(false)} >
<Icon.Button
name='chevron-down'
backgroundColor='transparent'
color='#000000'
padding={0}
size={30}
/>
</TouchableOpacity>
Anyone tell me how I make my button to lowercase in react native because I already get the answer in stack overflow but there is using touch opacity and that is the different component of button so I want the answer for button component
When I will type anything in under title props example
title='Hello'
[1]
[1]: https://i.stack.imgur.com/UmaBF.png
you can use TouchableOpacity for your button
like this:
<TouchableOpacity
onPress={() => onClick}
style={{}}>
<Text
style={{
fontSize: 20,
alignSelf: 'center',
}}>
Hello
</Text>
</TouchableOpacity>
Install react-native-paper and import Button from react-native-paper and make uppercase prop to false.
import { Button } from 'react-native-paper';
<Button
mode="contained"
uppercase={false}
onPress={() => console.log('Hello')}>
Hello
</Button>
From your question I just understood that you only need to convert the button text to lower case. For that just replace {title} with {title.toLowerCase()} and it will convert the titles text to lower case.
I can't figure our how to make the Chakra component inline. Read the documentation but couldn't figure out the right property or if this is a css class thing.
<Text> Hello World, </Text>
<Text> place me next to the Text above! </Text>
ChakraUI documentation on <Text> component explains that it renders a <p> tag by default.
But, you can swap it to work as a <span> tag, by giving <Text> the as prop. Like this:
<Text as="span"> Hello World, </Text>
<Text as="span"> place me next to the Text above! </Text>
You can use Flex for this
<Flex>
<Text> Hello World, </Text>
<Text> place me next to the Text above! </Text>
</Flex>
I found the <Stack> tag useful. You can stack items horizontally as well as vertically:
<Stack direction='row'>
<Text>Hello World, </Text>
<Text>place me next to the Text above!</Text>
</Stack>
Alternatively there is a tag called <HStack> that does the same thing:
<HStack>
<Text>Hello World, </Text>
<Text>place me next to the Text above!</Text>
</HStack>
This results in:
"Hello World, place me next to the Text above!"
I'm using the built-in KeyboardAvoidingView in react native and when I use the code below in a screen where you can't see the tabs (like in a modal) it works perfectly fine and the keyboard doesn't cover any content whatsoever, but when I use the exact same code but in a screen that is used in tab navigation the keyboard covers some content, it's like the KeyboardAvoidingView doesn't take into consideration the height of the bottom tabs
Here's my code:
<KeyboardAvoidingView style={{flex: 1}} behavior="padding">
<ScrollView keyboardShouldPersistTaps="handled">
{content}
</ScrollView>
<TextInput
style={{height: 50, width: "100%", backgroundColor: "red"}}
placeholder="Test input"
/>
</KeyboardAvoidingView>
I want to render a single line of text with some words highlighted in a different color.
I would ideally do it with a span tag with react.
Wondering how would i do the same with react-native?
You can achieve this by using nested Text components
<Text style={{color: 'blue'}}>
I am blue
<Text style={{color: 'red'}}>
i am red
</Text>
and i am blue again
</Text>
Here's a link to the documentation explaining it better
Simply nest <Text> elements
<Text>
I am some text with
<Text style={{fontWeight: 'bold'}}>bold</Text>
stuff
<Text>
You can do it better, my way:
CText = (props) => <Text style={{color: props.color}}>{props.children}</Text>
inside render add:
const CText = this.CText
and return
<Text>I am <CText color={'red'}>Blue color</CText> and <CText color={'blue'}>Blue color</CText></Text>