Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 30000

Show one component in multiple or all screens

$
0
0

what's up?I'he been trying to add a custom reload button in all my screens, because in the future i'll change this element, but, I'm not getting it to work.

I already try to create a custo screen and put both, Navigator and Button, but it's not working, someone could give any tip?

Thanks for your help.

Component with both Navigator and Button:

const WrappedComponents = () => {    return (<><Navigator><ReloadButtonStyled /></Navigator></>    )}

This is my button:

import React from 'react'import { DevSettings } from 'react-native';import styled from 'styled-components'import IconFA from 'react-native-vector-icons/FontAwesome';const ReloadButtonStyled = () => {    const Container = styled.View`        background-color: #0779e4;        justify-content: center;        align-items: center;        width: 80px;        height: 80px;        border-radius: 40px;        position: absolute;        z-index:100;        bottom: 20px;        right: 20px;        elevation: 5;        `;    const TouchableWithoutFeedback = styled.TouchableWithoutFeedback``;    return (<TouchableWithoutFeedback onPress={() => DevSettings.reload()}><Container><IconFA name={'refresh'} size={40} color={'#f9f9f9'} /></Container></TouchableWithoutFeedback>    )};export default ReloadButtonStyled;

I want to put the Button in every screen, using navigationV5:

import 'react-native-gesture-handler';import React from 'react';import { NavigationContainer } from '@react-navigation/native';import { createStackNavigator } from '@react-navigation/stack';//import das telas usadas na navegaçãoimport MainScreen from '../screens/MainScreen';import DragDropScreen from '../screens/DragDropScreen';import WorkingExample from '../backups/WorkingExample'//criação da stack principalconst Stack = createStackNavigator();export default function MyStack() {    return (<NavigationContainer><Stack.Navigator                screenOptions={{                    headerShown: false,                }}><Stack.Screen                    name='MainScreen'                    component={MainScreen}                    options={{                        title: 'MainScreen'                    }}                /><Stack.Screen                    name='DragDropScreen'                    component={DragDropScreen}                    options={{                        title: 'DragDropScreen'                    }}                /><Stack.Screen                    name='WorkingExample'                    component={WorkingExample}                    options={{                        title: 'WorkingExample'                    }}                /></Stack.Navigator></NavigationContainer>    )}

Viewing all articles
Browse latest Browse all 30000

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>