React native reanimated - react-native

I am trying to create a toggle player animation in react native, the same like Spotify, where when you press the miniPlayer , the full size player will show, my problem is that the fullSize Player View is transparent, and I can't seem to get the background of that view to render the proper color.
I created a snack since the original Project is huge and to better understand the issue:
https://snack.expo.io/#git/github.com/oflarcade/MPlayer
MiniPlayer
Full Size Player

Related

React native iOS - splash screen using lottie file

In a React native application, We are trying to load Lottie animation as a splash screen.
In android, I'm able to achieve it by creating a native view for the android Lottie library. I want to play lottie animation in splash screen+ React native
I need the same in iOS, currently, we have an image splash screen, which we have implemented images.xcassets and LaunchScreen.storyboard (refer to screenshots)
Is there any possibility to use Lottie animations instead of these images here?
There is a workaround where I can add the Lottie animation in the app.js before starting with app content. In this case, first, the above-mentioned splash screen comes and the animation. If I remove this splash screen here, then a white screen and the animation will come.
How to use the Lottie animation instead of splash screen image on iOS?

At first, I have searched many articles about changing ios's LaunchScreen.storyboard with lottie animation. However, Xcode enforces that LaunchScreen.storyboard should be static screen. So, I inserted animation code after static launch screen loading. Maybe, launch screen is essential, because it is loading screen for initial loading resource in ios. If you remove the launch screen, then ios app shows black or white screen at first loading. Remove launch screen, Xcode 7
If you looking for animation launch screen using lottie in react native, i would suggest looking into this package.
https://www.npmjs.com/package/react-native-lottie-splash-screen
It implements animation splash screen using airbnb lottie files. Also, I apply this for multiple react native projects and it worked well. Have a nice day!

In iOS, the splash screen is a view without any associated logic.
What you could do to give the impression of the animation is to have it look like the first frame of your Lottie file.
Then, in the didFinishLaunchingWithOptions, you can start your Lottie animation.
In a RN application, the splash screen should be a quick flash and most of the startup time would be taken up by the RN setup. So, the animation should show up relatively smoothly even with this approch.
You can take a look at this repo to see how they've implemented it.

Placing a react-native-video inside FlatList then pressing a button to go full screen

Say I have a react native app with a FlatList. Inside the FlatList is a react-native-video component. The video is hosted online. Inside the FlatList the video can be played. What I want is also a button that can be pressed and the video should go full screen. Is this possible to do without having to reload the video?
One solution I can do is when the button is pressed a new screen shows (e.g. in StackNavigator) with the video using flex:1 to fill up the screen. However, because it is a new screen the video needs to load again.
I've seen the Reddit app be able to bring up a video full screen without having to reload it. Of course this might be a native app and harder to do in react native.
Any thoughts on how to achieve this in react native?
EDIT: Added extra info.

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?

Detect touch and draw rectangular box on bitmap image using react native

I've been looking for references for some time on how to draw rectangles in an image using react native, but I can not find anything.
What I try to do is something like the user touch on the screen to mark the start position, and move, and release on the end position. We have to keep displaying the updated square.
Example video
Code is available for native development using java. But I need it on react native.

How can I create a draggable and resizable image in React-Native?

I am new to React-Native and I have been following this tutorial, http://mindthecode.com/getting-started-with-the-panresponder-in-react-native/ along with this How to make draggable remember it's location in React Native , which create a draggable image that remember the current location.
I want to know if it is possible to create a draggable image with a pinch gesture for zooming in and out (that doesn't goes back to the original size or position).