search

Kureev / react-native-side-menu

Side menu component for React Native
MIT License
2.21k stars 434 forks source link

Button is atop of screen content #312

Open deedoc opened 7 years ago

deedoc commented 7 years ago

With folowing sample code we have "Exit button" drawed atop of screen content

Attaching screenshots

Menu opened: menu-opened

Menu closed: menu-closed

import React from "react";
import { AppRegistry, View, ScrollView, Text, Button } from "react-native";
import SideMenu from "react-native-side-menu";

AppRegistry.registerComponent("inventory", () => props => {
  let menu = <View style={{flex: 1}}>
    <ScrollView>
      <Text>Menu content FIRST</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text>
      <Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text>
      <Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text>
      <Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text>
      <Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text>
      <Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text>
      <Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text>
      <Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content</Text><Text>Menu content LAST</Text>
    </ScrollView>
    <Text>Press button below to exit</Text>
    <Button title="Exit button" onPress={() => {}} />
    <Text>Press button abowe to exit</Text>
  </View>;

  return <SideMenu menu={menu}>
    <View style={{flex: 1, backgroundColor: "white"}}>
      <Text>Screen content</Text>
    </View>
  </SideMenu>
});
Kureev commented 7 years ago

Hm, this is interesting. Seems that Button has an absolute positioning. Is it a standard RN button component?

deedoc commented 7 years ago

Yes, this is Button from react-native (notice import on top of source)

At the moment there is no enougn time to drill deeper, but in my working project, I avoided this by wrapping Button into View -> ScrollView like this:

// menu component's render
render(){
  return <View style={styles.menu}>
    <ScrollView><FlatList
      data={this.links}
      renderItem={({item, index}) => <View style={styles.menuItem}>
        <MenuLink to={item.to}><Text style={styles.menuItemText}>{item.label}</Text></MenuLink>
      </View>}
    /></ScrollView>
    {/* https://github.com/react-native-community/react-native-side-menu/issues/312 */}
    <View><ScrollView><ExitButton /></ScrollView></View>
  </View>
}