I am trying to stack an array of images one above the other as shown in the attachment below. With the below code, I am able to stack them one beside the other, however could not overlap them. Appreciate any help.
{array1.edges.map((u, i) => {
if (i > 5) return null;
return (
<Image
source={{ uri: u.node.profilePhoto.url }}
resizeMode="cover"
key={i}
style={{ height: 20, width: 20, borderRadius: 10 }}
/>
);
}
)}
You can set a negative marginLeft to around -10 to get that effect.
marginLeft: -10
Also followed this example rnplay.org/apps/LvdXgg to get it working.
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
Iam new to react-native iam trying to display a single value for two api values the problem is iam getting repeated component calls for two values whereas i want it to be displayed single time only
below is my code
if (item.current== 0 && item.overdue==0 ) {
return (
<View style={{ flex: 2, alignItems: "center" }}>
<Text
style={{
fontSize: _font(11),
color: colours.green,
}}
>
<Icon
size={18}
color="green"
name="checkcircleo"
type="AntDesign"
/>
</Text>
<Text
style={{
fontSize: _font(15),
color: colours.green,
marginTop:10
}}
>
TASKS ARE COMPLETED
</Text>
</View>
);
}
}}
/>
</View>
</View>
This is my api call output
here you can see two different objects
And my output is below
This is my output iam getting two completed alls
whereas i want an output like this
Can anyone tell me how its done
I think you are passing 2 values repeatly that cause it render 2 times.
It is better if you add the code section that call the code above.
As my imagnation, your code is like this
<Text> Tasks Due <Text>
{ values.map(item => renderItem(item)}
To check , you can add
<Text> {item.dairy_name} <Text>
in the render, to let you see what value are rendering.
So, render only 1 item, not render the array of values.
I am using the Vector Icons provided by Expo https://github.com/expo/vector-icons
All the icons accept a size prop which is an integer, my use case is to see if there to adjust the icon size automatically based on the parent container without having to worry about the size on each and every device (because size seems to translate the same on every device despite the pixel ratio, dimensions etc)
<View style={{flex: 1}}>
<Icon name="app-logo" size={30} color="white" />
</View>
I tried setting style prop to the below options but no luck. I would expect that this will not work because after all they are just fonts and they need not support the width and height
<Icon name="app-logo" style={{flex: 1}} color="white" />
<Icon name="app-logo" style={{width: '100%', height: '100%' color="white" />
Is there any cleaner or suggested way to do this? Using dimensions and ratios of the devices is my last resort.
Here's an example of the closest I've been able to get:
import React from "react"
import { PixelRatio, StyleSheet, Text, View } from "react-native"
import { FontAwesome5 } from "#expo/vector-icons"
const getRandomNumber = (min: number, max: number) =>
Math.random() * (max - min) + min
const App = () => {
const [containerSize, setContainerSize] = React.useState<number>()
const randomDimension = React.useMemo(() => getRandomNumber(100, 400), [])
return (
<View
style={{
flex: 1,
backgroundColor: "green",
justifyContent: "center",
alignItems: "center",
}}
>
<View
style={{
width: randomDimension,
aspectRatio: 1,
backgroundColor: "red",
}}
onLayout={layoutEvent =>
setContainerSize(layoutEvent.nativeEvent.layout.width)
}
>
<FontAwesome5
name="app-store-ios"
size={containerSize || 0}
style={{
textAlign: "center",
}}
color="blue"
/>
</View>
</View>
)
}
export default App
There's some code in here for intentionally setting the icon's parent container to a randomly sized square, and setting that on the parent, which is not what you're looking for but helped me re-create the problem.
The interesting bit which I think you want is the value passed to the onLayout prop of the icon's parent container, which gets the parent container's size and puts it in state. That state will be empty until the first render & layout, so we have the size of the vector icon defaulted to 0 until that happens. Once we have the size of the parent in state, we can set the size of the vector icon.
The vector icon doesn't actually fill the entire parent's space, but it scales pretty close pretty well. I think that's because the vector icon itself is a font under the hood (?) and we're trying to set the size of a font (in pts really (I think?)) to the size we got from the parent in pixels. There's probably a neat way to clean that up using react native's PixelRatio - I spent a bit of time trying but couldn't get it working perfectly.
The last thing I needed to do (since the vector icon doesn't actually "fill" the parent view was set the style prop of the icon to { textAlign: 'center' } which keeps it centered horizontally within the parent view (it was already centered vertically) instead of being off on the left side of the parent.
You could jank the whole thing into submission by adding a constant to the size and putting a negative top margin on the icon, but that's kind of a PITA and obviously not a great solution (it'll be a headache every time you do it and it probably won't work cross platform / on different pixel densities).
The reason I actually arrived at this post was because I was trying to keep an icon the same size as text; I was working on an app which showed a comment count (integer) to the left of a little chat bubble icon and I wanted the icon's size to scale with the system's font size if the user had adjusted that in their system settings. This is actually easier (which makes sense given my theory about vector icons being represented as fonts under the hood is correct). Here's the relevant part of my code that achieved that:
const StoryCommentsLabel = ({ story }: { story: HackerNewsItem }) => {
const navigation = useNavigation()
const numberOfComments = story.descendants || 0
const doNotActTouchable = { activeOpacity: 1 }
const fontScale = React.useMemo(() => PixelRatio.getFontScale(), [])
const defaultFontSize = 14
const iconSize = defaultFontSize * fontScale
return (
<TouchableOpacity
style={{ flexDirection: "row", justifyContent: "flex-end" }}
onPress={() => {
if (numberOfComments > 0) {
navigation.navigate("Story Comments", { story })
}
}}
hitSlop={{ top: 20, left: 20, bottom: 20, right: 20 }}
{...(numberOfComments === 0 ? doNotActTouchable : {})}
>
<Text
style={{
fontSize: 14,
color: PlatformColor("secondaryLabel"),
}}
>
{numberOfComments}
</Text>
<View style={{ width: 5 }} />
<Ionicons
name="chatbubble"
size={iconSize}
color={PlatformColor("secondaryLabel")}
/>
</TouchableOpacity>
)
}
There's more in there than you need, but the important bit is this:
const fontScale = React.useMemo(() => PixelRatio.getFontScale(), [])
const defaultFontSize = 14
const iconSize = defaultFontSize * fontScale
This question already has an answer here:
How to display an array of images from the firestore database in react native?
(1 answer)
Closed 3 years ago.
how to display an array of images in react native, the images use URLs, I tried this, but the images are not showing, the console log is showing the images URLs, but for some reason, the images aren't showing
{
this.props.user.map((images) => {
images.photos.map((image) => {
console.log(image)
return (
<View>
<Image style={{ width: 350, height: 300 }} source={{ uri: image }} />
</View>);
})
})
}
You forgot to return the inner map, also don't forget to add key when iterating over arrays
{this.state.user.map(images => (
images.photos.map(image => (
<View key={image}>
<Image style={{ width: 350, height: 300 }} source={{ uri: image }} />
</View>
))
))}
I've created a code snippet that works, please check expo snack
export default class App extends React.Component {
render() {
return array.map((image) => {
console.log(image)
return (
<View>
<Image style={{ width: 350, height: 300 }} source={{ uri: image.download_url }} />
</View>);
});
}
}
How to use flex in react-native to make any element inside <View></View> to arrange themselves when their length got bigger than their container's ?
Below is my code:
const FilmCasts = ({ artists }) => (
<View style={{ flex: 1, flexDirection: 'row', }}>
{artists.map(artist => (
<Image
key={cast.name}
source={{ uri: artist.img }}
style={{ width: 80, height: 100 }}
/>
))}
</View>
);
This is what I want. I want to make the 5th and others to go below the first row automatically after they hit the screen width limit, like what HTML usually does
But instead, this is what I get when in React Native, the <Image> elements continue to be rendered outside their parent's width
You can use the prop flexWrap:'wrap' for wrapping the elements. flexWrap controls whether children can wrap around after they hit the end of a flex container. More here
const FilmCasts = ({ artists }) => (
<View style={{ flex: 1, flexDirection: 'row',flexWrap:'wrap' }}>
{artists.map(artist => (
<Image
key={cast.name}
source={{ uri: artist.img }}
style={{ width: 80, height: 100 }}
/>
))}
</View>
);
You can simply defined image with dynamically using the Dimension property of react native .
like when you are using
<Image
resizeMode="cover" or try "contain"
key={cast.name}
source={{ uri: artist.img }}
style={{ width: width * 0.5 , height: 100 }} // this will be done currently defining the values .
/>
Here is one blog regarding image handling in react native Click to see the blog
Hope my answer will give an idea to slove your problem