As I work on my react-native app, I encounter a challenge regarding the layout. My application consists of a top bar and a bottom bar with an image in between. The image needs to fill up as much space as possible without overlapping the bars. Despite numerous attempts using flexbox and adjusting image size, I still struggle to achieve this desired outcome.
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import Topbar from './topbar.js'
export default function App() {
return (
<View style = {{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between'
}}>
<View>
<Topbar />
</View>
<View>
<Image source={require('./image2.jpg')} />
</View>
<View>
<Topbar />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
// here are my bars
import React, { Component } from "react";
import {
Image, StyleSheet, View, Text, Dimensions
} from "react-native";
import Animated from "react-native-reanimated";
const {screenwidth, screenheight } = Dimensions.get("window");
export default class Topbar extends Component {
render() {
return (
<View style ={{
width: screenwidth,
height: 80,
backgroundColor: "#C0C0C0",
flexDirection: 'row',
justifyContent: 'space-between',
}}>
</View>
)
}
}
const styles = StyleSheet.create({
topbarbackground: {
width: screenwidth,
height: 80,
backgroundColor: "#C0C0C0",
}
})
The goal is to have the bars and the image occupy the entire phone screen without any overlap issues.