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

Ensure all pages have padding around the status bar

This commit is contained in:
Nat 2021-04-19 10:24:18 -03:00
parent 077a55f4a7
commit 468381207f
6 changed files with 55 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,26 +1,34 @@
import React from "react";
import { View } from "react-native";
import { SafeAreaView } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { StatusBarSpace } from "src/interface/rendering";
import BackBarJsx from "./back-bar";
import TrayJsx from "src/components/navigation/tray";
export const ScreenWithTrayJsx = (props) => {
return (
<View style = { { flex: 1 } }>
<SafeAreaView style = { { flex: 1 } }>
<ScrollView>
<StatusBarSpace
color = {
props.statusBarColor
? props.statusBarColor
: "transparent"
}/>
{ props.children }
</ScrollView>
<TrayJsx
active = { props.active }
navigation = { props.navigation } />
</View>
</SafeAreaView>
);
};
export const ScreenWithBackBarJsx = (props) => {
return (
<View style = { { flex: 1 } }>
<SafeAreaView style = { { flex: 1 } }>
<StatusBarSpace color = "white"/>
<BackBarJsx navigation = { props.navigation }>
{ props.renderBackBar != undefined
? props.renderBackBar()
@ -30,13 +38,14 @@ export const ScreenWithBackBarJsx = (props) => {
<ScrollView>
{ props.children }
</ScrollView>
</View>
</SafeAreaView>
);
};
export const ScreenWithFullNavigationJsx = (props) => {
return (
<View style = { { flex: 1 } }>
<SafeAreaView style = { { flex: 1 } }>
<StatusBarSpace color = "white"/>
<BackBarJsx navigation = { props.navigation }>
{ props.renderBackBar != undefined
? props.renderBackBar()
@ -49,6 +58,6 @@ export const ScreenWithFullNavigationJsx = (props) => {
<TrayJsx
active = { props.active }
navigation = { props.navigation } />
</View>
</SafeAreaView>
);
};

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

@ -1,6 +1,7 @@
import React, { useState, useEffect } from "react";
import {
View,
SafeAreaView,
Text,
Image,
TextInput,
@ -24,8 +25,7 @@ import {
const { SlideInMenu } = renderers;
import BackBarJsx from "src/components/navigation/back-bar";
import { timeToAge } from "src/interface/rendering";
import { timeToAge, StatusBarSpace } from "src/interface/rendering";
const TEST_IMAGE_1 = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
const TEST_IMAGE_2 = "https://natureproducts.net/Forest_Products/Cutflowers/Musella_cut.jpg";
@ -47,7 +47,8 @@ const TEST_MESSAGES = [
];
const ConversationContainerJsx = (props) => (
<View style = { { flex: 1 } }>
<SafeAreaView style = { { flex: 1 } }>
<StatusBarSpace color = "white"/>
<BackBarJsx navigation = { props.navigation }>
{ props.renderBackBar() }
</BackBarJsx>
@ -76,7 +77,7 @@ const ConversationContainerJsx = (props) => (
color = "black" />
</TouchableOpacity>
</View>
</View>
</SafeAreaView>
);
const ComposeJsx = ({ navigation }) => {

3
src/components/pages/discover.js
View File

@ -59,7 +59,8 @@ const DiscoverJsx = (props) => {
return (
<ScreenWithTrayJsx
active = "Discover"
navigation = { props.navigation }>
navigation = { props.navigation }
statusBarColor = "white">
<TouchableWithoutFeedback
onPress = { () => props.navigation.navigate("Search") }>
<View style = { styles.form }>

4
src/components/pages/discover/search.js
View File

@ -1,6 +1,9 @@
import React, { useState } from "react";
import { View, TextInput, Text, Dimensions, Image } from "react-native";
import { StatusBarSpace } from "src/interface/rendering";
import { ScreenWithTrayJsx } from "src/components/navigation/navigators";
import { TouchableWithoutFeedback } from "react-native-gesture-handler";
const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
@ -51,6 +54,7 @@ const SearchJsx = ({navigation}) => {
<ScreenWithTrayJsx
active = "Discover"
navigation = { navigation }>
<StatusBarSpace />
<View style = { styles.form }>
<TextInput
style = { styles.searchBar }

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

@ -1,9 +1,16 @@
import React, { useEffect, useState } from "react";
import { Dimensions, View, Image, TextInput, Text } from "react-native";
import {
Dimensions,
View,
SafeAreaView,
Image,
TextInput,
Text
} from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { timeToAge } from "src/interface/rendering";
import { timeToAge, StatusBarSpace } from "src/interface/rendering";
import { activeOrNot } from "src/interface/interactions";
import TimelineViewJsx from "src/components/posts/timeline-view";
@ -225,7 +232,8 @@ const ViewCommentsJsx = (props) => {
return (
<>
{ state.loaded ?
<View style = { { flex: 1 } }>
<SafeAreaView style = { { flex: 1 } }>
<StatusBarSpace color = "white"/>
<BackBarJsx navigation = { props.navigation }/>
<ScrollView>
{ state.loaded
@ -280,7 +288,7 @@ const ViewCommentsJsx = (props) => {
</TouchableWithoutFeedback>
</View>
</View>
</View>
</SafeAreaView>
: <></>
}
</>

12
src/interface/rendering.js
View File

@ -1,3 +1,15 @@
import React from "react";
import { View, StatusBar } from "react-native";
export function StatusBarSpace(props) {
return <View style = {
{
height: StatusBar.currentHeight,
backgroundColor: props.color ? props.color : "transparent",
}
}></View>;
};
export function withoutHTML(string) {
return string.replace(/<[^>]*>/ig, "");
}