How can I use a custom refresh indicator in a FlatList in React Native? - react-native

I want to replace the "refresh indicator" that is used in FlatList, etc. inside the RefreshControl. I am aware that there are some minor styling changes you can make with tint and colors to adjust the colors of the spinners on iOS and Android but I want to make my own spinner indicator entirely and disable the native spinners.
Is it possible to either disable the native spinners used during the refresh operation, or to replace them with my own custom spinners?

Related

react native avoid scrollview/flatlist shrinking while keyboard is open

In my react native app, I have a header with a search option and a body with content which is a flatlist and a footer. The flatlist is shrinking when the keyboard is active and my footer is showing above the keyboard.
I don't want to shrink flatlist while the keyboard is active or don't want to show the footer while the keyboard is active. how I can achieve that?
You can use KeyboardAvoidingView from react-native.
Please check your android manifest it should have
android:windowSoftInputMode="adjustPan"
something like this(please check this)

How can you make a movable frame over the content with React Native, while making it possible to click the content around it?

I'm looking for a solution, if possible a library or a custom component, for React Native, without Expo.
I need to create a video frame that is movable in the screen, up and down, and cover the content. I also need to make it possible to click on the content behind it.
Another difficulty is that I need it to stay up on all screens during navigation.
I first tried to use reanimated-bottom-sheet with some increments, but the content behind the bottom is not clickable. Also, to make it available on all screens I needed to put in at the same level as React Navigation's BottomTabNavigator and it covers the tab bar too even with a zIndex.
I also tried to use modals, but I'm relatively new to React Native and couldn't find how to make the background touchable as well as making it movable.
I guess I need to make a view with absolute positionning and learn Reanimated, unless you have a simpler idea?
Thanks

How to remove background of selected image in react native?

I want to get this kind of effect in React Native.
Such as removing background by touching screen, removing similar color point in one screen, and after select one point, moving finger here and there to remove the background.
Can I get this effect in react native?
If possible, which module should I use?

React Native Landscape to Portrait height bug

I just created react native app with expo init, built for Android. When i open app in landscape mode and after turn to portrait, the height of app is half of screen. https://i.stack.imgur.com/kzIlD.jpg
Here is code: https://github.com/catalin935/reactNativeHeightBug/blob/master/App.js
It looks like your view has been initialised with a height, perhaps Dimensions.get('screen').height?
If you want the view to always fill the screen, add flex: 1 to the styles to get it to flex to it's container rather than using height/width values.
Alternatively, you could attach an event listener to Dimensions to listen for the change event and use that to rerender your views although I'd only really recommend that if you want your UI to change depending on the screen ratio/orientation (eg, set a FlatList to use two columns rather than one in landscape mode. I have a small library called react-native-screenutils that may help you with that.

Create a new touch effect in a React Native button

React Native seems to come with a few built in effects for "touchable" views, such as TouchableOpacity, TouchableNativeFeedback etc. but none of them fit my use case.
Is there an obvious way to change the styles on a button as it's depressed (change the background color or enlarge the button using transform:scale etc.)? Obviously I'd want it to revert to the default styles when the user stops holding the button.