I want to display an array as a string which is seperated by commas in react native. This is my code.
let currentWorkout = this.props.currentWorkout;
// tools is an array. want to display it as valueOne, valueTwo, valueThree etc.
let tools = JSON.stringify(currentWorkout.tools);
return (
<View style={styles.container}>
<WorkoutDetail
workout={this.props.currentWorkout}
workoutImage={currentWorkout.workoutImage}
onPressWorkout={() => alert("CONTINUE WORKOUT")}
/>
<View style={styles.workoutInfo}>
<KeyValueText header="Tools" value={tools} /> ////
</View>
</View>
How can I achieve this?
You could do
let tools = currentWorkout.tools.join(', ');
instead of JSON.stringify and I think you'll got the results you want.
Check the documentation for the join method.
Related
Using "react-native-pager-view": "^6.1.2" package in ReactNative.
I have the same bug as here.
https://github.com/callstack/react-native-pager-view/issues/503
I'm trying PagerView with the code pasted below, but when I swipe to move the page, e.nativeEvent.position is different from the actual page index.
import PagerView, { PagerViewOnPageScrollEvent, PagerViewOnPageSelectedEvent } from 'react-native-pager-view';
import Modal from 'react-native-modal';
const onPageScroll = useCallback((e: PagerViewOnPageScrollEvent) => onPageScrollPagerView(e, setCurrentTabIndex), []);
const onPageScrollPagerView = (
e: PagerViewOnPageScrollEvent,
setCurrentTabIndex: React.Dispatch<React.SetStateAction<number>>,
) => {
console.log(`onPageScroll position = ${e.nativeEvent.position}`);
setCurrentTabIndex(e.nativeEvent.position);
};
return (
<Modal isVisible={isVisible}>
<SafeAreaView>
<View>
<PagerView ref={viewPager} initialPage={0} onPageScroll={onPageScroll} onPageSelected={onPageSelected}>
{list.map((item) => (
<View key={item.id}>
{item.content}
</View>
))}
</PagerView>
</View>
</SafeAreaView>
</Modal>
);
This is the result obtained when scrolling to the first page.
onPageScroll is called twice, and for some reason the wrong position is returned the second time.
And 0 is set to setCurrentTabIndex.
onPageScroll position = 1
onPageScroll position = 0
Is there any way to resolve this?
It may be related to what you write in <Modal></Modal> of 'react-native-modal'.
As also written here, this problem does not occur on iPhone11, but on iPhone12 and newer devices.
I didn't use 'react-native-modal', I used fullscreen modal.
screenOptions={{ presentation: 'modal' }}
I uploaded images to firebase storage and fetching it on the display. It's working fine, but I noticed that it reloads every time changing to other page and the speed is quite slow.
So, after googling I found expo-fast-image (because I'm using expo)
https://www.npmjs.com/package/expo-fast-image
so, after installing it, I'm trying to follow or copy the given an example, but I don't know how to use it properly. Below is my code with expo-fast-image.
Does anyone know how to use it properly?
import ExpoFastImage from 'expo-fast-image';
const CustomListItem = ({id, number, data, coffeeBean, description, image, Order}) => {
const user = auth.currentUser;
const name = user.displayName;
const ImageLoad = (image, id) => (
<View>
<ExpoFastImage
uri= {image}
CacheKey={`cache.${id}`}
/>
</View>
)
return (
<ListItem key={id} bottomDivider onPress={() => {Order({id, number, coffeeBean, description, image})}} >
<ExpoFastImage image={image, id}/>
<Avatar rounded source={{CacheKey: `cache.${id}`}} />
<ListItem.Content >
<ListItem.Title style={{ fontWeight: '800'}}>{id}</ListItem.Title>
<ListItem.Subtitle numberOfLines={1} ellipsizeMode='tail'>
Stock: {number}
</ListItem.Subtitle>
</ListItem.Content>
</ListItem>
)
}
export default CustomListItem
If expo-fast-image uses Image from react-native, images are cached and they are downloaded again only when the url changes. So in your situation, you might be giving different urls to the component which propmts it to download again. Make sure the url is always the same. Even if you add some random string like #some-random-value at the end of url which does nothing. It triggers the download action.
I'm trying to build something like this
I'm doing it in React Native, what you would recommend me to use to create a list like this that I could increase the on focus number?
this is a simple version of what you want.
const App = () => {
const ages = new Array(100).fill(0);
return <FlatList
data={ages}
horizontal
renderItem={({index}) => <View style={{marginHorizontal: 10}}><Text>{index + 1}</Text></View>}
/>
}
I want to make links navigate to a different screen in my messaging app. Is there a way to make TouchableOpacity inline?
Here is a quick workaround, this is not highly optimized but should work in most cases
function createTextLinks(text) {
let texts = text.split(' ');
let comps = texts.map((link) => {
let linking = link.match(/([^\S]|^)(((https?\:\/\/)|(www\.))(\S+))/gi);
if(linking) return <TouchableOpacity onPress={() => Linking.openURL(linking)}>{linking}</TouchableOpacity>
return link
});
//insert space again
comps = comps.map(comp=>[comp," "]);
return comps.flat()
}
Now you can use it like following
<Text>
{
createTextLinks_(
"If you find this interesting, email us at https://www.saachitech.com or contact us at http://stackoverflow.com and we will help you out! "
)}
</Text>
Note
React Native Text have a data detector property which convert a link to hyperlink but it’s only available on Android. Here is the link https://reactnative.dev/docs/text#datadetectortype
I'm new to smartphone programming and have joined a project using React Native and NativeBase.
I'd like to include an image/icon in each Item in a Picker, which doesn't seem like an exotic concept, but it doesn't seem to be supported and I can't find anyone discussing doing it on SO or by Googling.
I've tried a couple ways of adding things inside the <Picker.Item> and </Picker.Item> but anything put there seems to simply be ignored.
Is it possible or is there a different approach to do what I want using these frameworks?
You can try this package
https://github.com/sohobloo/react-native-modal-dropdown
the complete example you can check here
https://github.com/sohobloo/react-native-modal-dropdown/blob/master/example/index.js
the use is something like this
_dropdown_2_renderRow(rowData, rowID, highlighted) {
let icon = highlighted ? require('./images/heart.png') : require('./images/flower.png');
let evenRow = rowID % 2;
return (
<TouchableHighlight underlayColor='cornflowerblue'>
<View style={[styles.dropdown_2_row, {backgroundColor: evenRow ? 'lemonchiffon' : 'white'}]}>
<Image style={styles.dropdown_2_image}
mode='stretch'
source={icon}
/>
<Text style={[styles.dropdown_2_row_text, highlighted && {color: 'mediumaquamarine'}]}>
{`${rowData.name} (${rowData.age})`}
</Text>
</View>
</TouchableHighlight>
);
}
the end product example is look like this :
all copyrights belongs to :
https://github.com/sohobloo