I am developing an App with react native and I have graphical problem. I need to have a dynamic yellow bar(which is in a view) for my text as below:
So, it means that if I have a longer text, the bar should be longer and if the text is shorter, the bar also should be shorter and fit for it. By now I use the static method. I give 90 as the width to the bar which is not good. Here is the code:
<View style={[styles.rowSep, {width:90}]}/>
<Text style={[commonStyle.normalItem , {marginBottom:10}]}>
{I18n.t("Il_Museum_Modena")}
</Text>
Here is the style:
rowSep: {
height: 7,
marginVertical: 4,
//width: Dimensions.get('window').width,
backgroundColor: '#FABB00',
marginBottom:12,
},
Can you help me to have dynamic yellow bar based on the length of the text. Thanks in advance.
You can wrap Text with View and set view StyleSheet to get effect what you want.
Example:
<View style={styles.textwrapper}>
<Text>Just test</Text>
</View>
Style:
textwrapper: {
borderBottomWidth: 5px,
borderBottomColor: #234532,
borderStyle: 'solid'
}
I haven't test this code, but I hope this give you some hints.
Related
I am making an app to read Quran, using react native (expo). I am having some problems formatting the text.
Problems:
Random spacing
Text resize automatically
Text aligns on the left side at the end.
Here is my code:
function Read(){
return (
<SafeAreaView style={styles.container}>
<HeaderSurahScreen navigation={navigation} route={route} />
<Divider
orientation="vertical"
width={5}
style={{ borderBottomColor: "#545353" }}
/>
{/* create a logic here to display tranlition or arabic */}
<ScrollView style={styles.scroll}>
<Text style={styles.surahPage} adjustsFontSizeToFit>
{surah &&
surah.map((ayat, index) => (
<Text key={index} allowFontScaling={false} selectable={true}>
<Text selectable={true} style={styles.ayat}>
{ayat.text}
</Text>
<Text style={styles.number}>{toArabic(ayat.id)}</Text>
</Text>
))}
</Text>
</ScrollView>
<StatusBar style="auto" />
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: DEFAULT_BACKGROUND_COLOR_THEME,
},
scroll: {
flex: 1,
padding: 7,
},
surahPage: {
flex: 1,
marginTop: 15,
textAlign: "justify",
},
ayat: {
flex: 1,
fontFamily: ARABIC_FONT,
color: DEFAULT_COLOR_THEME,
fontSize: 30,
},
number: {
fontSize: 18,
color: DEFAULT_COLOR_THEME,
},
});
Screenshots(3):
The result I am looking for:
To make the text align in your text, you need to use justify to make all the lines have the same length, but also you need to add one attribute direction to make the justification to the right side.
direction: "rtl";
textAlign: "justify"
You may want to have a look at this:
http://jsfiddle.net/aew75/
Unfortunately, I fear I know no way of fixing the problem of the spaces between words coming from justify. There is no way to expand the letters size and width as in the mushaf. This can be a revolutionary idea of arabic fonts usage on the web and dispalys in general.
Maybe give it a shot and have other muslim / arab developers contribute :)
justify will do the job (except the last line) ,i think this what you are asking for
To solve this you should import I18nManager library from react-native,then:
In useEffect write this line :
I18nManager.forceRTL(true);
considering big spaces between words , i used to manage it as possible in styling the text like this :
letterSpacing: -3
change -3 to any other values below 0 ,this will narrow spaces between words as possible
that worked for me
is it possible to obtain below view in react native either using canvas or View?
I'm quite sure it's achievable if you use
Grey layer - White background with grey foreground, with borderBottomLeftRadius
White Layer - borderBottomLeftRadius BorderTopRightRadius
another layer with borderTopRightRadius
Example for grey layer
<View style={{ backgroundColor: '#FFF', height: 20 }}>
<View style={{ backgroundColor: "grey", borderBottomLeftRadius: '20%'}}>
content
</View>
</View>
You just have to play around with the background colors, borderColor and borderradius etc. Though it may not look exactly the same as what you want. and may appear different on different devices
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 have code that looks like this:
<View style={styles.logoContainer}>
<View style={styles.logoTextContainer}>
<Text style={styles.logoText}>{siteName}</Text>
</View>
<View style={styles.logoImageContainer}>
<Image source={logo} style={styles.logo} resizeMode="contain" />
</View>
</View>
With the relevant styles looking like this:
logoContainer: {
flex: 4,
alignSelf: 'stretch',
alignItems: 'center',
justifyContent: 'space-evenly',
// borderWidth: 1,
// borderColor: 'blue',
},
logoImageContainer: {
flex: 3,
justifyContent: 'center',
// borderWidth: 1,
// borderColor: 'red',
},
logo: {
width: 250,
height: 250,
},
The issue is that the (square) image does not scale to fit inside the container (the commented out borders are so that I can make sure the containers are where I think they are, and the right size - they are).
I have seen various questions about this - some concern remote images, not the case here. Other suggestions:
Set resizeMode as a prop to the Image element.
Set resizeMode as a style.
Do either of the above with the width as 'undefined' in the style.
Do either of the above with the width as 'auto' in the style.
None have made any difference, the only thing that works is setting width and height specifically, as seen in the code above. This looks ok on the more recent (read: larger) iPhone sims, but causes the image to overlap with other stuff on the iPhone 5 sim.
To check if the resizeMode prop is having any effect, I set it to 'center' (with no width or height styles). This was a bit more promising, as the image is now only slightly wider than the screen. However, it is still much taller than the view, which contradicts the docs on resizeMode: center:
center: Center the image in the view along both dimensions. If the
image is larger than the view, scale it down uniformly so that it is
contained in the view.
Trying to add width=auto/undefined to resizeMode="center", causes the image not to display at all.
The logoImageContainer is a defined size (defined through flexbox), and I just want the image scaled and centred to fit in it.
How react native Text and Image responsive?
I only know the Flexbox can make layout responsive but seems can not apply in text and image.
e.g.Make my text and image smaller in iphone 4s, bigger in iphone 6
Thanks.
You can use Flexbox in order to make your application responsive.
For example, say you wanted to display a line of text and an image on the same line:
class ResponsiveExample extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>
Example of centered text
</Text>
<Image
resizeMode={"contain"}
style={styles.image}
source={{uri: "your image"}}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between"
},
text: {
marginLeft: 20,
flex: 1
},
image: {
marginRight: 20,
height: 400,
flex: 3,
}
});
Now the text and image will be displayed relative to the screen size. The usual hangup here is that flexDirection defaults to column, which will make things line up vertically. You can see what happens when we flip from portrait to landscape orientation:
As you can see, the text and image respond to the change in orientation.
For a better overview of Flexbox, I like to refer to the following guide:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
Just keep in mind that React Native defaults to a flex-direction of column, so if you want things laid out horizontally, you'll have to explicitly set it to row.
I think react-native-fit-image is useful for you.
React Native Fit Image enables you to draw responsive image component.
You can use this component as below.
<FitImage
source={{ uri: 'http://facebook.github.io/react/img/logo_og.png' }}
style={styles.fitImage}
/>
You are right to think about Flexbox, simply wrap your Text and Image inside View and make those View flexbox responsive.