Is there a way to dynamically inject react native script into code.
I have dynamically generated script like:
<Text><Text styles={{ fontSize: 30, fontWeight: 'bold'}}>Two Color Options</Text></Text><Text> <Text><Text styles={{ fontSize: 30, fontWeight: 'bold'}}>Stone Grey</Text>- Great for new... </Text>
and need to show it like a Text components with styles in react-native application.
I tried react-jsx-parser but it doesn't work as expected.
Appreciate any help!
Related
I'm currently trying to create a mui theme for our react project and I wondered if it is possible to specify a font-size for each breakpoints.
Something like :
h3: {
fontSize: {
xs: "1.5rem",
xl: "2rem",
...
}
fontWeight: "bold",
lineHeight: "2.25rem",
},
I know this code is not valid but it is so you get the idea of what i'm looking for.
Same thing for line-height.
It is the first time i'm creating a custom theme so i'm not very familiar with all that.
I'm trying to integrate stripe on my mobile app
I tried to import CardField from '#stripe/stripe-react-native' but the problem is I can't change its style I want the number field to be on the line as so for both CVC and expiry date.
is there a way to do this I checked the documentation I only found this example
The docs for using the CardField with stripe-react-native are here: https://stripe.com/docs/payments/accept-a-payment?platform=react-native&ui=custom#react-native-create-checkout-page
The CardField support some styling via style and cardStyle as shown in the example:
<CardField
cardStyle={{
backgroundColor: '#FFFFFF',
textColor: '#000000',
}}
style={{
width: '100%',
height: 50,
marginVertical: 30,
}}
/>
I want to change style in part of Text in React Native.
I tried this :
<Text style={styles.parent}>
Dernier message : <Text style={[styles.children, {
color: 'red',
paddingLeft: 10,
borderWidth: 5,
borderColor: 'black',
}]}>Coucou</Text>
</Text>
const styles = StyleSheet.create({
parent: {
backgroundColor: 'yellow',
},
children: {
backgroundColor: 'blue',
},
})
Parent background color is changed - good
Children color and background color is changed - good
Children padding left and border is not changed
Can you help me ? Thanks
The <Text> element is special as far as layout is concerned. From the docs: "everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line."
To achieve what you seem to be looking for, it's probably advisable to use a wrapping<View> with two inner <Text>s.
PFB the expo snack link. Hope it helps
Expo link
I am trying to change the font color of a Semantic pre-made component. I am using this component in React.
I tried adding a id and class tag to the tag, but it did not work. I also tried targeting the entire body in my css file.
<Container text id="text1">
<Header
as='h1'
content='Gardenia'
inverted
style={{
fontSize: mobile ? '2em' : '4em',
fontWeight: 'normal',
marginBottom: 0,
marginTop: mobile ? '1.5em' : '1.5em',
}}
/>
#text1{
color: black;
}
You can see how to use preset colors for headers in the Semantic UI docs, if you want to define custom colors, Semantic UI has its own protocol for that which are utilized with custom class names.
I want to display a link button instead of button on my react native page. Right now I have the below code:
<Button onPress={this.handleGetDirections} title="Get Directions" />
I want to show the above button as a link. How can I achieve this in React Native.
Thank You.
Use textDecorationLine.
E.g :
<TouchableOpacity>
<Text style={styles.underLineText}>Your underline Text</Text>
</TouchableOpacity>
underLineText: {
fontSize: 12,
textDecorationLine: 'underline',
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
}
If it is about the styling of a link within the browser. That's done by the default browser vendor styles. You won't have that happen in react-native.
You can have a simple Text element that is styled to look like a link (ie: blue) and have a onPress handler for that.
Just follow Pritish Vaidyas... link :)
Hope this helps