I have a sidebar view which has a button which when pressed should navigate to another page in my app. However if I remove the height attribute from a neighbouring view the button is not pressable. If I add a height attribute to my wikiView styles the button then works. I am beside myself on how changing a neighbouring view’s height attribute can make an another views pressable button work/not work.
MainSideBarWeb.js
import React, { useState, Component, useEffect } from "react";
import {
StyleSheet,
Text,
View,
ScrollView,
Image,
TextInput,
Button,
Alert,
TouchableOpacity,
Modal,
Pressable,
StatusBar
} from "react-native";
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
import { useIsFocused } from "@react-navigation/native";
import { registerRootComponent } from 'expo';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import { useNavigation } from '@react-navigation/native';
import constants from './Constants.js';
import { styles } from './CommonStylesWeb.js';
import RNPickerSelect from 'react-native-picker-select';
const STYLES = ['default', 'dark-content', 'light-content'];
const TRANSITIONS = ['fade', 'slide', 'none'];
const MainSideBarWeb = () => {
const [hidden, setHidden] = useState(false);
const [sideBarContent, setSideBarContent] = useState('');
const [statusBarStyle, setStatusBarStyle] = useState(STYLES[0]);
const [statusBarTransition, setStatusBarTransition] = useState(
TRANSITIONS[0],
);
const changeStatusBarVisibility = () => {
setHidden(!hidden);
if(hidden) {
setSideBarContent('')
}
else {
setSideBarContent("Cancer Types n Cancer Drugs n Cancer Genes")
}
};
const changeStatusBarStyle = () => {
const styleId = STYLES.indexOf(statusBarStyle) + 1;
if (styleId === STYLES.length) {
setStatusBarStyle(STYLES[0]);
} else {
setStatusBarStyle(STYLES[styleId]);
}
};
const changeStatusBarTransition = () => {
const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
if (transition === TRANSITIONS.length) {
setStatusBarTransition(TRANSITIONS[0]);
} else {
setStatusBarTransition(TRANSITIONS[transition]);
}
};
return (
<SafeAreaProvider>
<SafeAreaView style={styles.sideBar}>
<StatusBar
animated={true}
backgroundColor="#61dafb"
barStyle={statusBarStyle}
showHideTransition={statusBarTransition}
hidden={hidden}
/>
<View style={styles.buttonContainer}>
<Button style={styles.buttonContainer}
title="Toggle StatusBar"
onPress={changeStatusBarVisibility}
/>
</View>
{hidden &&
<View style={[
styles.sideBar,
{
// Try setting `flexDirection` to `"row"`.
flexDirection: 'column',
},
]}>
<TouchableOpacity style={{backgroundColor: "red", padding: 20}} onPress={()=> {
console.log('does not work');
}
}>
<Text>Press Me</Text>
</TouchableOpacity>
</View>
}
</SafeAreaView>
</SafeAreaProvider>
);
};
export { MainSideBarWeb };
CancerHomepageWeb.js
import { StatusBar } from "expo-status-bar";
import React, { useState, Component, useEffect } from "react";
import {
StyleSheet,
Text,
View,
ScrollView,
Image,
TextInput,
Button,
Alert,
TouchableOpacity,
Modal,
Pressable
} from "react-native";
import { useIsFocused } from "@react-navigation/native";
import { registerRootComponent } from 'expo';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import { useNavigation } from '@react-navigation/native';
import constants from './Constants.js';
import { styles } from './CommonStylesWeb.js';
import RNPickerSelect from 'react-native-picker-select';
import { MainSideBarWeb } from './MainSideBarWeb'
const CancerHomepageWeb = ({navigation}) => {
const [cancerWiki, setCancerWiki] = useState("");
const [cancerType, setCancerType] = useState("");
const [selectedValue, setSelectedValue] = useState(null);
const [selectedLabel, setSelectedLabel] = useState(null);
const [options, setOptions] = useState([]);
const [cancerWikiContent, setCancerWikiContent] = useState("");
//const navigation = useNavigation();
console.log("navigation ", navigation);
useEffect(() => {
const getData = async () => {
var urlCancerWiki = await constants.getServerURL() + 'cancers_wiki';
console.warn(urlCancerWiki);
let resultCancerWiki = await fetch(urlCancerWiki, {
method: "GET", mode: 'cors'
}).then(response => response.json())
.then(response => {
if (response) {
console.warn(response)
setCancerWiki(response)
}
});
};
getData();
}, []);
async function handleChangeCancer(value, index) {
console.warn("CANCER HAS CHANGED");
setSelectedValue(value);
console.warn(value)
if(index > 0) {
indexOffset = index - 1;
console.warn(options[indexOffset].label);
setSelectedLabel(options[indexOffset].label);
const url = await constants.getServerURL() + 'cancer_wiki';
console.warn(url);
let result = fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: value}),
mode: 'cors'
}).then(response => response.json())
.then(response => {
if (response) {
setCancerWikiContent(response)
setCancerWiki("")
}
});
}
};
const searchCancers = async() => {
const url = await constants.getServerURL() + 'cancer_name';
console.warn(url);
console.warn(cancerType);
if (cancerType.length >= 3) {
let result = fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ cancer_type: cancerType}),
mode: 'cors'
}).then(response => response.json())
.then(response => {
setOptions([]);
optionsTemp = [];
console.warn("GETTING CANCER RESPONSE")
console.warn(response)
if (response) {
//setCancer = response.cancers
console.warn("VALID CANCER RESPONSE")
response.map( (cancer) => {
optionsTemp.push(new Object({label:cancer.name , value: cancer.id}));
});
console.warn(optionsTemp)
setOptions(optionsTemp);
} else {
console.warn("Error retrieving Cancer");
//setErrorMessage("Error Getting Cancers!");
//setErrorVisible(true);
}
});
}
}
return (
<View style={styles.sideBar}>
<MainSideBarWeb />
<StatusBar style="auto" />
<View style={styles.container}>
<TextInput
style={styles.TextInput}
placeholder="Cancers"
placeholderTextColor="#003f5c"
onChangeText={(cancerType) => setCancerType(cancerType)}
onKeyPress={searchCancers}
/>
</View>
<View style={styles.selectBox}>
<Text>Select Cancer</Text>
<RNPickerSelect
style={styles.container}
items={options}
onValueChange={(value, index) =>
handleChangeCancer(value,index)}
value={selectedValue}
/>
{selectedValue && <Text>Selected: {selectedLabel}</Text>}
</View>
<ScrollView>
<View style={styles.wikiView}>
<Text>{cancerWikiContent}</Text>
<Text>{cancerWiki}</Text>
</View>
</ScrollView>
</View>
);
}
export { CancerHomepageWeb };
CommonStylesWeb.js (where if wikiView’s height is set MainSideBarWeb’s button works, if it is not, button does not work.
import {
StyleSheet,
Text,
View,
Image,
TextInput,
Button,
Alert,
TouchableOpacity,
} from "react-native";
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:'column',
backgroundColor: 'white',
alignItems: "center",
justifyContent: "center",
},
container1: {
flex: 1,
flexDirection:'column',
backgroundColor: 'white',
alignItems: "left",
justifyContent: "left",
},
container2: {
flex: 2,
flexDirection:'column',
backgroundColor: 'white',
alignItems: "left",
justifyContent: "left",
},
container3: {
flex: 3,
flexDirection:'column',
backgroundColor: 'white',
alignItems: "left",
justifyContent: "left",
},
selectBox: {
backgroundColor: 'white',
alignItems: "center",
justifyContent: "center",
marginLeft: 400,
marginRight: 400,
},
wikiView: {
backgroundColor: "#94C93D",
borderRadius: 30,
width: 1000,
height: 300,
marginBottom: 20,
alignItems: "center",
justifyContent: "center",
marginLeft: 300,
marginRight: 250,
},
TextInput: {
backgroundColor: "#94C93D",
width: 1000,
flex: 1,
padding: 10,
marginLeft: 20,
alignItems: "center",
justifyContent: "center",
},
backButton: {
alignItems: 'left',
justifyContent: 'left',
paddingVertical: 12,
paddingHorizontal: 32,
borderRadius: 4,
elevation: 3,
backgroundColor: '#2196F3',
},
scrollView: {
marginHorizontal: 20,
height: 500,
},
sideBar: {
flex: 1,
flexDirection:'column',
backgroundColor: 'white',
alignItems: "left",
justifyContent: "left",
backgroundColor: '#ECF0F1',
},
buttonOpen: {
backgroundColor: '#F194FF',
},
buttonClose: {
backgroundColor: '#2196F3',
},
buttonContainer: {
backgroundColor: 'white',
width: 100
}
});
export { styles };
