Hi I am new to react native. I was trying to add a calendar date picker to the app which worked fine with
react-native-calendar-picker
However I tried adding another view below it, but, elements are not adding outside, instead, the calendar element is getting longer in height and hiding whatever i add after it.
<ScrollView style={styles.scrollMain} >
<Text style={{fontSize:15}}>Mark the dates and time you are available</Text>
<View style={styles.nurseCalendar} >
<CalendarPicker
dayShape='circle'
todayBackgroundColor={'#88B3F9'}
selectedDayTextColor={"#FFFFFF"}
selectedDayStyle={styles.calendarStyle}
nextTitle='>>>'
width={340}
height={342}
restrictMonthNavigation={true}
minDate={Date.now()}
onDateChange={this.handleDateChange}
previousTitle='<<<'
></CalendarPicker>
</View>
<View>/** no matter what i add here won't show however the view above will increase in height **/</View>
</ScrollView>
Here are the style properties i am using:
scrollMain:{
alignContent:'center',
flexDirection:'column',
paddingTop:25,
paddingLeft:25,
paddingRight:25,
backgroundColor:'#F7F9FC'
},
nurseCalendar:{
width:'90%',
alignSelf:'center',
marginTop:25,
height:'100%',
backgroundColor:'#fff',
flexWrap:'wrap'
},
calendarStyle:{
borderColor: '#6574CF',
backgroundColor: 'dodgerblue',
color: 'white',
borderWidth: 2,
borderRadius: 50,
}
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
I have a certain problem that I am facing and would like to see whether or not what I am facing is a react-native bug that needs submission to the react-native issues or if it is an error on my part.
I am trying to create a TextInput that is centered to my screen and is supposed to be able to grow in width as one types into it, once enough text is written it wraps to the next line. I am facing a problem that as one types in the TextInput the text appears first and then changes the size of the view causing a flicker and words typed to disappear and then reappear. Eventually the UI settles correctly and appears correct, but as one types the previous written characters can flow to be greater than the width of the View despite the View has no limit to width. I know I have figured out this is due to the parent have a alignItems property that makes the children (in this case the TextInput) centered.
The goal is to make the view expanded in width along side the text being written without this flickering bug.
return (
<KeyboardAvoidingView behavior="height" keyboardVerticalOffset={Platform.OS === 'ios' > 0 : 24} style={styles.flex1}>
<View style={styles.addingText}>
<TextInput
multiline
returnKeyType="done"
blurOnSubmit={true}
textAlignVertical="center"
style={styles.defaultAddingText}
autoFocus={addingText}
selectionColor="#3C99FF"
underlineColorAndroid="transparent"
value={text}
onChangeText={handleTextChange}
onSubmitEditing={handleSubmit}
/>
</View>
</KeyboardAvoidingView>
);
const styles = StyleSheet.create({
flex1: {
flex: 1,
},
addingText: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
zIndex: 100,
},
defaultAddingText: {
paddingHorizontal: 10,
borderRadius: 10,
},
});
Give a height to your defalutAddingText style as following,
const styles = StyleSheet.create({
flex1: {
flex: 1,
},
addingText: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
zIndex: 100,
},
defaultAddingText: {
height:auto,
paddingHorizontal: 10,
borderRadius: 10,
},
});
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.
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.