nat
/
resin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Place a menu provider at the very root of the app to avoid duplicate mounts

This commit is contained in:
Nat 2021-04-18 17:07:44 -03:00
parent fa8e5c7357
commit 2335a21266
4 changed files with 80 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/App.js
View File

@ -1,8 +1,9 @@
import 'react-native-gesture-handler'; import 'react-native-gesture-handler';
import React from "react";
import { createAppContainer } from 'react-navigation'; import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from "react-navigation-stack"; import { createStackNavigator } from "react-navigation-stack";
import { MenuProvider } from "react-native-popup-menu";
import { registerRootComponent } from 'expo'; import { registerRootComponent } from 'expo';
@ -45,6 +46,19 @@ const Stack = createStackNavigator({
} }
}); });
const App = createAppContainer(Stack); const AppContainer = createAppContainer(Stack);
const App = (props) => {
const providerStyles = {
backdrop: {
backgroundColor: "black",
opacity: 0.5
}
};
return <MenuProvider style = { providerStyles }>
<AppContainer />
</MenuProvider>;
};
export default registerRootComponent(App); export default registerRootComponent(App);

91
src/components/navigation/navigators.js
View File

@ -2,78 +2,53 @@ import React from "react";
import { View } from "react-native"; import { View } from "react-native";
import { ScrollView } from "react-native-gesture-handler"; import { ScrollView } from "react-native-gesture-handler";
import { MenuProvider } from "react-native-popup-menu";
import BackBarJsx from "./back-bar"; import BackBarJsx from "./back-bar";
import TrayJsx from "src/components/navigation/tray"; import TrayJsx from "src/components/navigation/tray";
// Provider for context menus
// Allows for establishing global styling of context menus
export const ContextJsx = (props) => {
return (
<MenuProvider customStyles = { providerStyles }>
{ props.children }
</MenuProvider>
);
};
export const ScreenWithTrayJsx = (props) => { export const ScreenWithTrayJsx = (props) => {
return ( return (
<ContextJsx> <View style = { { flex: 1 } }>
<View style = { { flex: 1 } }> <ScrollView>
<ScrollView> { props.children }
{ props.children } </ScrollView>
</ScrollView> <TrayJsx
<TrayJsx active = { props.active }
active = { props.active } navigation = { props.navigation } />
navigation = { props.navigation } /> </View>
</View>
</ContextJsx>
); );
}; };
export const ScreenWithBackBarJsx = (props) => { export const ScreenWithBackBarJsx = (props) => {
return ( return (
<ContextJsx> <View style = { { flex: 1 } }>
<View style = { { flex: 1 } }> <BackBarJsx navigation = { props.navigation }>
<BackBarJsx navigation = { props.navigation }> { props.renderBackBar != undefined
{ props.renderBackBar != undefined ? props.renderBackBar()
? props.renderBackBar() : <></>
: <></> }
} </BackBarJsx>
</BackBarJsx> <ScrollView>
<ScrollView> { props.children }
{ props.children } </ScrollView>
</ScrollView> </View>
</View>
</ContextJsx>
); );
}; };
export const ScreenWithFullNavigationJsx = (props) => { export const ScreenWithFullNavigationJsx = (props) => {
return ( return (
<ContextJsx> <View style = { { flex: 1 } }>
<View style = { { flex: 1 } }> <BackBarJsx navigation = { props.navigation }>
<BackBarJsx navigation = { props.navigation }> { props.renderBackBar != undefined
{ props.renderBackBar != undefined ? props.renderBackBar()
? props.renderBackBar() : <></>
: <></> }
} </BackBarJsx>
</BackBarJsx> <ScrollView>
<ScrollView> { props.children }
{ props.children } </ScrollView>
</ScrollView> <TrayJsx
<TrayJsx active = { props.active }
active = { props.active } navigation = { props.navigation } />
navigation = { props.navigation } /> </View>
</View>
</ContextJsx>
); );
}; };
const providerStyles = {
backdrop: {
backgroundColor: "black",
opacity: 0.5
}
}

61
src/components/pages/direct/conversation.js
View File

@ -25,7 +25,6 @@ import {
const { SlideInMenu } = renderers; const { SlideInMenu } = renderers;
import BackBarJsx from "src/components/navigation/back-bar"; import BackBarJsx from "src/components/navigation/back-bar";
import { ContextJsx } from "src/components/navigation/navigators";
import { timeToAge } from "src/interface/rendering"; import { timeToAge } from "src/interface/rendering";
@ -49,38 +48,36 @@ const TEST_MESSAGES = [
]; ];
const ConversationContainerJsx = (props) => ( const ConversationContainerJsx = (props) => (
<ContextJsx> <View style = { { flex: 1 } }>
<View style = { { flex: 1 } }> <BackBarJsx navigation = { props.navigation }>
<BackBarJsx navigation = { props.navigation }> { props.renderBackBar() }
{ props.renderBackBar() } </BackBarJsx>
</BackBarJsx> <ScrollView>
<ScrollView> { props.children }
{ props.children } </ScrollView>
</ScrollView> <View style = { [ styles.row, styles.send.container ] }>
<View style = { [ styles.row, styles.send.container ] }> <TextInput
<TextInput placeholder = "Say something..."
placeholder = "Say something..." multiline
multiline value = { props.state.newMessage }
value = { props.state.newMessage } style = { styles.input }
style = { styles.input } onChangeText = {
onChangeText = { value => {
value => { props.setState({...props.state,
props.setState({...props.state, newMessage: value,
newMessage: value, });
}); }
} }/>
}/> <TouchableOpacity
<TouchableOpacity style = { styles.send.button }
style = { styles.send.button } onPress = { props.onSubmit }>
onPress = { props.onSubmit }> <Ionicons
<Ionicons name = "ios-send"
name = "ios-send" size = { 24 }
size = { 24 } color = "black" />
color = "black" /> </TouchableOpacity>
</TouchableOpacity>
</View>
</View> </View>
</ContextJsx> </View>
); );
const ComposeJsx = ({ navigation }) => { const ComposeJsx = ({ navigation }) => {

5
src/components/pages/view-comments.js
View File

@ -7,7 +7,6 @@ import { timeToAge } from "src/interface/rendering";
import { activeOrNot } from "src/interface/interactions"; import { activeOrNot } from "src/interface/interactions";
import TimelineViewJsx from "src/components/posts/timeline-view"; import TimelineViewJsx from "src/components/posts/timeline-view";
import { ContextJsx } from "src/components/navigation/navigators";
import BackBarJsx from "src/components/navigation/back-bar"; import BackBarJsx from "src/components/navigation/back-bar";
import { TouchableWithoutFeedback } from "react-native-gesture-handler"; import { TouchableWithoutFeedback } from "react-native-gesture-handler";
@ -224,7 +223,7 @@ const ViewCommentsJsx = (props) => {
}, []); }, []);
return ( return (
<ContextJsx> <View>
{ state.loaded ? { state.loaded ?
<View style = { { flex: 1 } }> <View style = { { flex: 1 } }>
<BackBarJsx navigation = { props.navigation }/> <BackBarJsx navigation = { props.navigation }/>
@ -284,7 +283,7 @@ const ViewCommentsJsx = (props) => {
</View> </View>
: <></> : <></>
} }
</ContextJsx> </View>
); );
} }