Develop Reference

How to add data manually into the SectionedMultiSelect on the runtime?

Here is my code, it works for the code that was already entered well. But I want to be able to just input some additional data on the go while it's working. We have a web version that does this. But how to do this with react native? I am not really sure that sectionedmultiselect is capable of this anyway.
<View style={styles.input}>
<Text style={styles.header}>Rakip Firma :</Text>
<SectionedMultiSelect
onToggleSelector={() => enemyList()}
items={itemsEnemy}
IconRenderer={Icon}
uniqueKey="id"
subKey="children"
selectText="Rakip seçin"
showDropDowns={true}
readOnlyHeadings={true}
onSelectedItemsChange={onSelectedEnemyChange}
selectedItems={selectedEnemy}
searchPlaceholderText="Ara.."
confirmText="Onayla"
selectedText="ürün seçildi"
colors={{ chipColor: 'blue', disabled: 'blue' }}
expandDropDowns={true}
/>
</View>

How to display an animated Gif in React Native

Before you link me to another question similar to this one, such as this or that. I will say that I have done exactly what the answers said, but my gif won't animate as it should (It is displayed though).
Here is what I've done in a function, which is displayed through the main App function Stack.Screen within a NavigationContainer and Stack.Navigator. (I'm using React Navigation to move across screens, the context here is that a button is pressed and it displays the contents of the DetailsScreen function)
function DetailsScreen({ navigation }) {
return (
<View style={{ flex: 2, alignItems: 'center', justifyContent: 'center' }}>
<Image source={require('./src/gif/moving.gif')} />
<Text>Here is a gif</Text>
</View>
);
}
This displays the first still image of my gif, but doesn't animate it.
I also already went ahead and placed the implementations in the build.gradle dependencies, but it didn't do anything for me. I have a feeling the problem lies there.
implementation 'com.facebook.fresco:fresco:1.+'
// For animated GIF support
implementation 'com.facebook.fresco:animated-gif:1.+'
// For WebP support, including animated WebP
implementation 'com.facebook.fresco:animated-webp:1.+'
implementation 'com.facebook.fresco:webpsupport:1.+'
(I already checked fresco's new implementation version 2, but it still didn't help. I also tried changing from a specific version, still doesn't work)
I am using React Native version 0.67. (I tried starting it again while downgrading react-native to 0.66 and it still doesn't work.)
Also, not sure if this has to do with anything in this screenshot here, this is what I had by default and gave me this error message as soon as I opened the file, but the program launches just fine even with that on
Doing it normally in the main App() function starting first displays the gif, but still remains as a still image.
What should I do? I mean... what else can I do?
Edit:
I found the solution to the problem... it was a simple case of just cold booting the emulator I was using from android studio.
However, Tadej's answer is valid, as the view style aligning messes up the gif a bit. If you are having a similar problem and the answer doesn't help, try cold booting your emulator, or even reinstall a newer one... or alternatively, use a real android phone to test these sorts of things.
Anyway, thanks a lot for the help Tadej ! I hope this question has helped others in my situation.
Tadej Slemenšek

This worked for me. Setting height and width on Image prop did not show the gif. So I flexed it and added maxWidth and maxHeight.
const imageUrl = 'https://media.giphy.com/media/xT0xeCCINrlk96yc0w/giphy.gif';
const App = () => {
const { width } = useWindowDimensions();
return (
<View style={{flex: 1}}>
<Image style={{flex: 1, maxWidth: width, maxHeight: width}} source={{uri: imageUrl}}/>
</View>
);
};

React Native: clickable list of items

I am doing a dictionary app with lists of items like this:
acceptable, benevolent, big, charitable, considerate
fair, good, helpful, honest, hospitable
lavish, reasonable, thoughtful, tolerant, unselfish
Each item in the list is a link which leads to the similar list related to the word clicked.
I have two questions:
How to do it in React Native w/o falling into caring hands of React Native WebView? It's required to support styling (as in picture) and handling targeted clicks somehow.
Alternative solutions are welcome, including those built upon the WebView component. Just to consider performance side in here.
P.S. I have spotted alike functionality in the M.-W. dictionary app:

According to doc:
Text supports nesting, styling, and touch handling.
So I think the best solution is to properly nest your texts and pass them a function to handle the onPress action.
I will give an example code, not styled at all but completely stylable:
onPress = (text) => {
// do stuff
return
}
render() {
return (
<View style={styles.container}>
<Card>
<Text>
Synonyms:
{this.state.synonyms.map(synonym => {
return <Text onPress={() => this.onPress(synonym)}> {synonym} </Text>
})}
</Text>
</Card>
</View>
);
}
And here is a snack if you wanna take a look

How to set Refresh Indicator of FlatList in react native?

I'm trying to set the refresh indicator of flat list in react native but don't know how to do it. List View has this prop :
refreshControl={<RefreshControl
colors={["#9Bd35A", "#689F38"]}
refreshing={this.props.refreshing}
onRefresh={this._onRefresh.bind(this)}
/>
}
But Flat List has only these :
refreshing={this.props.loading}
onRefresh={this._onRefresh.bind(this)}

I found the solution! It might be the dummy but FlatList also has a prop called refreshControl like ListView but I just didn't test it! Just like this:
<FlatList
refreshControl={<RefreshControl
colors={["#9Bd35A", "#689F38"]}
refreshing={this.props.refreshing}
onRefresh={this._onRefresh.bind(this)} />}
/>

refreshControl={
<RefreshControl
isRefreshing={isRefreshing}
onRefresh={loadProducts}
colors={[Colors.GreenLight]} // for android
tintColor={Colors.GreenLight} // for ios
/>
}
this covers both ios and android

In official doc for RefreshControl component it is stated as - This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at scrollY: 0, swiping down triggers an onRefresh event
So for FlatList don't use it directly because they provides the two special props named as refreshing and onRefresh - on which the standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop.
USAGE -
Step 1:
const wait = (timeout) => { // Defined the timeout function for testing purpose
return new Promise(resolve => setTimeout(resolve, timeout));
}
const [isRefreshing, setIsRefreshing] = useState(false);
const onRefresh = useCallback(() => {
setIsRefreshing(true);
wait(2000).then(() => setIsRefreshing(false));
}, []);
Step 2:
Now use component as
<FlatList
style={styles.flatListStyle}
data={inProgressProjects.current}
keyExtractor={item => item._id}
renderItem={renderItem}
showsVerticalScrollIndicator={false}
refreshing={isRefreshing} // Added pull to refesh state
onRefresh={onRefresh} // Added pull to refresh control
/>
For more information refer here -
https://reactnative.dev/docs/refreshcontrol
https://reactnative.dev/docs/flatlist#onrefresh
Hope this will help you or somebody else.
Thanks!

You can pass in the renderScrollComponent to your FlatList component with the same RefreshControl component you have showed above. I have created a expo snack for this: https://snack.expo.io/rJ7a6BCvW
The FlatList is using VirtualizedList within itself, and for VirtualizedList component, it takes a renderScrollComponent: https://facebook.github.io/react-native/docs/virtualizedlist.html#renderscrollcomponent

I was passing bounces={false} to my Flatlist which was causing problem. This will not allow you to refresh. Remove it if you want to use the above one solution mentioned. Thanks

react-native app lags on android

I wrote simple app on react-native. It consists of <ListView> that shows <Image> in rows. Images are fetched from the network. It runs on iOS very well. But on Android if stucks when image appears. FPS is 0.9-3.2;
I used systrace tool to figure out what is going on. Here is a screenshot of it.
It looks like everything is done on UI thread.
Here is a render function of my class:
render() {
return (
<View style={styles.container}>
<ListView
style={styles.list}
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
/>
</View>
);
}
renderRow(rowData) {
return <Image
style={{ width: 320, height: 320 }}
source={{uri: rowData.coverPhoto}} />
}
I have aa filling that I missed something. Can somebody help me figure out what exactly ?
Thanks!

I ran into the same problem recently and figured out what's causing this and how to solve it (at least for me). I know this is old, but I'll leave this here in case somebody needs it.
The Cause
For me it was the image from the net. Its resolution is huge (more than 3000x4000) while my <Image /> component was styled to be small (50x50 to be exact).
The Solution
There's a prop for <Image /> specifically for Android, which is resizeMethod (this is different from resizeMode). I used resizeMethod: resize and the app runs well on Android. Here's the documentation for more info.

Try change
renderRow={this.renderRow.bind(this)}
to
renderRow={this.renderRow}