Video background article code

App.tsx

import React from 'react';
import {SafeAreaView, StatusBar, StyleSheet, Text, View} from 'react-native';
import {VideoBackground} from './src/components/VideoBackground/VideoBackground';
import {Button} from './src/components/Button/Button';

const background = require('./src/assets/cars.mp4');

const App = () => {
 return (
   <>
     <VideoBackground source={background} />
     <View style={styles.overlay} />
     <SafeAreaView style={styles.contentWrapper}>
       <StatusBar
         backgroundColor="transparent"
         translucent={true}
         hidden={false}
       />
       <View style={styles.contentContainer}>
         <Text style={styles.title}>Welcome</Text>
         <Text style={styles.subtitle}>Start your journey now</Text>
         <View style={styles.buttonsContainer}>
           <View style={styles.buttonWrapper}>
             <Button
               onPress={() => console.log('Sign in')}
               style={styles.button}>
               Sign in
             </Button>
           </View>
           <View style={styles.buttonWrapper}>
             <Button
               onPress={() => console.log('Sign up')}
               style={styles.button}>
               Sign up
             </Button>
           </View>
         </View>
       </View>
     </SafeAreaView>
   </>
 );
};

const styles = StyleSheet.create({
 title: {
   fontSize: 40,
   fontWeight: '700',
   color: '#fff',
   textAlign: 'center',
   marginBottom: 5,
 },
 subtitle: {
   fontSize: 20,
   fontWeight: '500',
   color: '#fff',
   textAlign: 'center',
   marginBottom: 50,
 },
 contentWrapper: {
   flex: 1,
 },
 contentContainer: {
   flex: 1,
   justifyContent: 'center',
   paddingHorizontal: 40,
 },
 button: {
   marginTop: 20,
 },
 buttonsContainer: {
   alignItems: 'center',
   justifyContent: 'center',
   maxWidth: 400, 
   alignSelf: 'center',
 },
 buttonWrapper: {
   minWidth: '100%', 
},
 overlay: {
   position: 'absolute',
   top: 0,
   right: 0,
   bottom: 0,
   left: 0,
   backgroundColor: 'rgba(0, 0, 0, 0.2)', 
 },
});

export default App;

Button.tsx

import React from 'react';
import {View, Text, Pressable, StyleSheet} from 'react-native';


export const Button = ({children, style, onPress}) => {
 return (
   <View style={[styles.buttonOuterContainer, style]}>
     <Pressable
       style={({pressed}) =>
         pressed
           ? [styles.buttonContainer, styles.pressed]
           : styles.buttonContainer
       }
       onPress={onPress}
       android_ripple={{color: '#ffffff'}}>
       {({pressed}) => (
         <Text
           style={
             pressed ? [styles.buttonText, {color: '#000'}] : styles.buttonText
           }>
           {children}
         </Text>
       )}
     </Pressable>
   </View>
 );
};


const styles = StyleSheet.create({
 buttonOuterContainer: {
   borderRadius: 10,
   overflow: 'hidden',
 },
 buttonContainer: {
   backgroundColor: '#000',
   paddingVertical: 16,
   paddingHorizontal: 32,
   elevation: 3,
   color: '#fff',
 },
 buttonText: {
   color: '#fff',
   textAlign: 'center',
   fontSize: 18,
   fontWeight: '600',
 },
 pressed: {
   backgroundColor: '#fff',
   color: '#000',
 },
});

VideoBackground.tsx

import React from 'react';
import {StyleSheet} from 'react-native';
import Video from 'react-native-video';

export const VideoBackground = ({source}) => {
 return (
   <Video
     resizeMode="cover"
     muted={true}
     repeat
     source={source}
     style={styles.backgroundVideo}
   />
 );
};

const styles = StyleSheet.create({
 backgroundVideo: {
   position: 'absolute',
   top: 0,
   left: 0,
   bottom: 0,
   right: 0,
 },
});