We might want to display a video in different places in our app and be able to move from one to another without losing the video in a similar way than it's done in Youtube app. We see a lot of this feature in web articles with floating video and we might want to apply this principle in mobile app.

There are several methods to get to this result, you may think about some of them. Let's start with a naive one : using boolean to hide and show the video.

First let's see how it works with a static component like text. 

let's take the next piece of code wich displays an article with a header and a big title :

++pre>++code>export default function App() {
return (
<>
<View style={styles.header}>
<Text style={styles.H1}>SUPER HEADER</Text>
</View>
<ScrollView contentContainerStyle={styles.container} scrollEventThrottle={16} >
<Text style={styles.H1}>BIG TITLE</Text>
<Text>
{'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n'}
</Text>
</ScrollView>
</>
);
}


const styles = StyleSheet.create({
header: {
height: 100,
backgroundColor: '#ffcc66',
justifyContent: 'flex-end',
alignItems: 'center',
},
H1: {
fontSize: 20,
fontWeight: 'bold',
paddingVertical: 20,
},
container: {
alignItems: 'center',
justifyContent: 'center',
},
});++/pre>

We want to display a title in the page and to keep it below the header when we pass it on scroll.

First, let's display the title component in every place we want to display it, in the page and below the header.

++pre>++code><View style={styles.header}>
<Text style={styles.H1}>SUPER HEADER</Text>
</View>
<View style={styles.container}>
<Text style={styles.H1}>Second Title</Text>
</View>
<ScrollView contentContainerStyle={styles.container} scrollEventThrottle={16} >
<Text style={styles.H1}>BIG TITLE</Text>
<Text>
{'Lorem [...] laborum.\n'}
</Text>
<Text>
{'Lorem [...] laborum.\n'}
</Text>
<View style={styles.container}>
<Text style={styles.H1}>Second Title</Text>
</View>
<Text>
{'Lorem [...] laborum.\n'}
</Text>++/pre>

We are going to give an onLayout prop to the component which is into the ScrollView to get the component's position in the page. On scroll, when we are going to pass this position, we are going to change the display boolean value.

We define the onLayout method into a hook, useStickyComponent.

++pre>++code>const useStickyComponent = () => {
const position = useRef();
const titleRef = useRef(null);
const onLayout = () => {
if (titleRef.current) {
titleRef.current.measure((h, pagey) => {
position.current = pagey - 100 + h;
});
}
};
}++/pre>

Using a reference instead of a state value to store the position avoids too many re-render in the page.

TitleRef is here the title component's reference.

To get the component's position, we use the measure method on the component reference.

We give the reference and onLayout method to the title component into the ScrollView as props.

++pre>++code><View onLayout={onLayout} ref={titleRef}>
<Text style={styles.H1}>Second Title</Text>
</View>++/pre>

In the state, we define a boolean to manage the displaying about the title component below the header.

++pre>++code>const [isTitleSticky, setIsTitleSticky] = useState(false)++/pre>++pre>++code>{isTitleSticky && (
<View style={styles.container}>
<Text style={styles.H1}>Second Title</Text>
</View>
)}++/pre>

In the hook, let's create a onScroll method. This method changes the boolean isTitleSticky value in the state when passing the Title component position in the ScrollView.

++pre>++code>const onScroll = event => {
if (position.current !== null) {
setIsTitleSticky(event.nativeEvent.contentOffset.y >= position.current);
}
};++/pre>++pre>++code><ScrollView contentContainerStyle={styles.container} scrollEventThrottle={16}
onScroll={onScroll}>++/pre>

‍

Now we have moved a text component from the content to the header, let's see how it goes with a video.

Replace the text component with a video and observe the result.

It doesn't seem to work well !! Our video starts and restarts every time it changes its place.

what's the issue ?

Using boolean doesn't render the same object in the different display places but a new instance of the component. We saw that above, we first duplicate the component where we wanted to display it. This does work well when working with static components such as text or images. Our eyes don't see the difference between the two components.

 If we want to use the same method with a video, during the "change of position", the video restart.

What is happening ?

Like said above, it's two different videos we mount and unmount. We just have the impression that the video restarts from the beginning.

(https://tech.bedrockstreaming.com/6play/how-a-fullscreen-video-mode-ended-up-implementing-react-native-portals/)

We want to keep the same video and move it from a position to another.

Portals to the rescue

It seems React Portals could resolve our issue. The idea is quite simple, to teleport the video from its position to another place in the component tree without re-render from a state change.

Problem is React Native doesn't support Portals because Portals is part of ReactDOM, not React.

There is a custom React Native module which is a native implementation of the React Portals : rn-native-portals.

Rn-native-portals is able to move children components from a Parent View to another.

rn-native-portals installation

++pre>++code>$ yarn add dylancom/rn-native-portals

# Using iOS

$ cd ios && pod install++/pre>

The lib has two components :

• PortalDestination
• PortalOrigin

PortalDestination role is to get PortalOrigin children components and display them somewhere else in the component tree.

In our case, we wrap the video component with PortalOrigin, and we use a PortalDestination below the header.

We use a state flag to change the display video position on scroll.

We place a VideoPlaceHolder behind the video component in the scrollView to avoid scroll jump in the page when the video is moving.

useStickyComponent

++pre>++code>const [playerDisplayLocation, setPlayerDisplayLocation] = useState('IN_APP');++/pre>

onScroll

++pre>++code>setPlayerDisplayLocation(topScreen >= position ? 'STICKY' : 'IN_APP');++/pre>

Below the header

++pre>++code>