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 from "react";
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from "react-navigation-stack";
import { MenuProvider } from "react-native-popup-menu";
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);

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

@ -2,78 +2,53 @@ import React from "react";
import { View } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { MenuProvider } from "react-native-popup-menu";
import BackBarJsx from "./back-bar";
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) => {
return (
<ContextJsx>
<View style = { { flex: 1 } }>
<ScrollView>
{ props.children }
</ScrollView>
<TrayJsx
active = { props.active }
navigation = { props.navigation } />
</View>
</ContextJsx>
<View style = { { flex: 1 } }>
<ScrollView>
{ props.children }
</ScrollView>
<TrayJsx
active = { props.active }
navigation = { props.navigation } />
</View>
);
};
export const ScreenWithBackBarJsx = (props) => {
return (
<ContextJsx>
<View style = { { flex: 1 } }>
<BackBarJsx navigation = { props.navigation }>
{ props.renderBackBar != undefined
? props.renderBackBar()
: <></>
}
</BackBarJsx>
<ScrollView>
{ props.children }
</ScrollView>
</View>
</ContextJsx>
<View style = { { flex: 1 } }>
<BackBarJsx navigation = { props.navigation }>
{ props.renderBackBar != undefined
? props.renderBackBar()
: <></>
}
</BackBarJsx>
<ScrollView>
{ props.children }
</ScrollView>
</View>
);
};
export const ScreenWithFullNavigationJsx = (props) => {
return (
<ContextJsx>
<View style = { { flex: 1 } }>
<BackBarJsx navigation = { props.navigation }>
{ props.renderBackBar != undefined
? props.renderBackBar()
: <></>
}
</BackBarJsx>
<ScrollView>
{ props.children }
</ScrollView>
<TrayJsx
active = { props.active }
navigation = { props.navigation } />
</View>
</ContextJsx>
<View style = { { flex: 1 } }>
<BackBarJsx navigation = { props.navigation }>
{ props.renderBackBar != undefined
? props.renderBackBar()
: <></>
}
</BackBarJsx>
<ScrollView>
{ props.children }
</ScrollView>
<TrayJsx
active = { props.active }
navigation = { props.navigation } />
</View>
);
};
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;
import BackBarJsx from "src/components/navigation/back-bar";
import { ContextJsx } from "src/components/navigation/navigators";
import { timeToAge } from "src/interface/rendering";
@ -49,38 +48,36 @@ const TEST_MESSAGES = [
];
const ConversationContainerJsx = (props) => (
<ContextJsx>
<View style = { { flex: 1 } }>
<BackBarJsx navigation = { props.navigation }>
{ props.renderBackBar() }
</BackBarJsx>
<ScrollView>
{ props.children }
</ScrollView>
<View style = { [ styles.row, styles.send.container ] }>
<TextInput
placeholder = "Say something..."
multiline
value = { props.state.newMessage }
style = { styles.input }
onChangeText = {
value => {
props.setState({...props.state,
newMessage: value,
});
}
}/>
<TouchableOpacity
style = { styles.send.button }
onPress = { props.onSubmit }>
<Ionicons
name = "ios-send"
size = { 24 }
color = "black" />
</TouchableOpacity>
</View>
<View style = { { flex: 1 } }>
<BackBarJsx navigation = { props.navigation }>
{ props.renderBackBar() }
</BackBarJsx>
<ScrollView>
{ props.children }
</ScrollView>
<View style = { [ styles.row, styles.send.container ] }>
<TextInput
placeholder = "Say something..."
multiline
value = { props.state.newMessage }
style = { styles.input }
onChangeText = {
value => {
props.setState({...props.state,
newMessage: value,
});
}
}/>
<TouchableOpacity
style = { styles.send.button }
onPress = { props.onSubmit }>
<Ionicons
name = "ios-send"
size = { 24 }
color = "black" />
</TouchableOpacity>
</View>
</ContextJsx>
</View>
);
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 TimelineViewJsx from "src/components/posts/timeline-view";
import { ContextJsx } from "src/components/navigation/navigators";
import BackBarJsx from "src/components/navigation/back-bar";
import { TouchableWithoutFeedback } from "react-native-gesture-handler";
@ -224,7 +223,7 @@ const ViewCommentsJsx = (props) => {
}, []);
return (
<ContextJsx>
<View>
{ state.loaded ?
<View style = { { flex: 1 } }>
<BackBarJsx navigation = { props.navigation }/>
@ -284,7 +283,7 @@ const ViewCommentsJsx = (props) => {
</View>
: <></>
}
</ContextJsx>
</View>
);
}