I'm trying to create a scrollable screen for an iOS app using Native Base's ScrollView component but for some reason every time I try to scroll down the screen in snapped back to the top. My code looks something like this:
<NativeBaseProvider>
<ScrollView>
<VStack>
<Box height="25%" marginBottom="25%" bgColor="black"></Box>
<Box height="25%" marginBottom="25%" bgColor="black"></Box>
<Box height="25%" marginBottom="25%" bgColor="black"></Box>
<Box height="25%" marginBottom="25%" bgColor="black"></Box>
<Box height="25%" marginBottom="25%" bgColor="black"></Box>
<Box height="25%" marginBottom="25%" bgColor="black"></Box>
<Box height="25%" marginBottom="25%" bgColor="black"></Box>
</VStack>
</ScrollView>
<NavBar></NavBar>
</NativeBaseProvider>
For reference, NavBar is a custom component whose code is this:
<HStack bg={"white"} borderTopColor="gray.200" borderTopWidth={"1"} width={"100%"} height={"10%"} rounded="lg" space={"10%"} justifyContent={'center'} position={'absolute'} bottom={0} marginLeft={0} >
<Box>
<Button title="Go to Home" bg="white" flex = {"2"} height = {20} onPress={() => navigation.navigate('Home')}>
<Image source={require("./assets/NavBarIcon1.png")} alt="Home"></Image>
</Button>
</Box>
<Box>
<Button title="Go to Energy" bg="white" flex = {"1"} height = {20} onPress={() => navigation.navigate('Energy')}>
<Image source={require("./assets/NavBarIcon2.png")} alt="Energy"></Image>
</Button>
</Box>
<Box>
<Button title="Go to Reports" bg="white" flex = {"1"} height = {20} onPress={() => navigation.navigate('Reports')}>
<Image source={require("./assets/NavBarIcon3.png")} alt="Reports"></Image>
</Button>
</Box>
<Box>
<Button title="Go to Alarms" bg="white" flex = {"1"} height = {20} onPress={() => navigation.navigate('Alarms')}>
<Image source={require("./assets/NavBarIcon4.png")} alt="Alarms"></Image>
</Button>
</Box>
</HStack>
I have tried disabling snapToStart, which didn't work. Disabling bounces resulted in the scroll no longer working. Setting a height for the ScrollView, placing the ScrollView inside of a Box, and placing the contents inside of a Box did not work either. I am unsure what exactly is conflicting with the ScrollView. Is there some property I am missing or not setting up correctly? I just need the screen to scroll down and stay down so I can view all my content without rubber banding back to the top.
Related
I'm working on having a left-side navigation bar for a web app I'm working on. The issue I'm running into is I want to make some style changes and I find it difficult to do so with the Drawer component. The biggest is I want the actual line of the drawer to be thicker if that makes sense.
Code below:
function SideNav({drawerWidth = 170}) { const history = useHistory(); const dispatch = useDispatch();
return(
<Drawer
PaperProps={{ padding: '20px'}}
sx={{
width: drawerWidth,
flexShrink: 0,
'& .MuiDrawer-paper': {
width: drawerWidth,
boxSizing: 'border-box',
},
}}
variant="permanent"
anchor="left"
>
<List>
<ListItem >
<img class="rotate" src="record1.png" width="80" height="80"/>
<Button variant='outlined' onClick={() => history.push('/home')}> Home </Button>
</ListItem>
<ListItem >
<img class="rotate" src="record1.png" width="80" height="80"/>
<Button variant='outlined' onClick={() => history.push('/create')}>Create</Button>
</ListItem>
<ListItem>
<img class="rotate" src="scratch.png" width="80" height="80" />
<Button variant='outlined' onClick={() => dispatch({ type: 'LOGOUT' })}>Log out </Button>
</ListItem>
<ListItem>
<img class="rotate" src="scratch.png" width="80" height="80" onClick={() => history.push('/profile')}/>
<Button variant='outlined' onClick={() => history.push('/create')}>Profile </Button>
</ListItem>
</List>
<Divider />
</Drawer>
);
}
export default SideNav;`
I've fiddled around with the sx={{}} and have yet to find a solution to the issue. My goal is just to make the drawer/navigation a little more defined so it pops
I think you are referring to the right border of the drawer. If it is the case you should change the prop PaperProps to:
PaperProps={{ sx: { borderRightWidth: 2, padding: '20px' } }}
Let me know if this works for you
I am very new to react.js and JavaScript, so apologies in advance. I'm trying to integrate https://diagrams.net into other webpage using the file that's directly given by diagrams.net here:
https://github.com/jgraph/drawio-integration/blob/master/diagram-editor.js?fbclid=IwAR1FMViVLW3Tba8RqMOUJtv16vIvPPycLYyu4rEtRTbuhbyztlrLXu5UyHo.
So as it can be seen in this example here: http://jgraph.github.io/drawio-integration/javascript.html, when the user double clicks on the diagram, they should be redirected to diagrams.net web and draw their own diagram.
The problem is that my web is currently built on React, and all the diagrams.net is built on vanilla JS. By inspecting the example above, they apparently use:
<img
style="cursor:pointer;"
title="Click to edit image"
onclick="DiagramEditor.editElement(this);"
src="data:image/png;base64,iVBORw0...
in the HTML to display the image of the diagram. I've tried to change it to react-like by changing it to:
<img alt="Click to edit image"
onClick={EditDiagram.DiagramEditor.editElement(this)}
src="data:image/png;base64,iVBORw0..."/>
and importing the JavaScript file by import * as EditDiagram from "../components/workarea/workarea-diagram-editor";, but it is returning TypeError: Cannot read properties of undefined (reading 'editElement').
I've also tried using dangerouslySetInnerHTML like this:
<div
dangerouslySetInnerHTML={{
__html:
"<img style='cursor:pointer;'
title='Click to edit image' onclick='DiagramEditor.editElement(this);'
src='data:image/png;base64,iVBORw0...'/>",
}}/>
but this way, that DiagramEditor.editElement(this) cannot be accessed that way.
I've been trying to get this to work for past 12 hours, but just can't get it to work. Is there any way to make this work?
Thank you so much.
Below is the React code that the JavaScript is being added on.
const WorkArea = () => {
const router = useRouter();
const formik = useFormik({
initialValues: {
scenario: "This is scenario",
},
validationSchema: Yup.object({
scenario: Yup.string().max(255).required("Scenario is required"),
}),
onSubmit: () => {
router.push("/");
},
});
const [countList, setCountList] = useState([0]);
// const [inputList, setInputList] = useState([]);
const AddScenario = () => {
let countArr = [...countList];
let counter = countArr.slice(-1)[0];
counter++;
countArr.push(counter);
setCountList(countArr);
};
const DeleteScenario = () => {
let countArr = [...countList];
let counter = countArr.slice(-1)[0];
counter--;
countArr.pop(counter);
setCountList(countArr);
};
// const onAddBtnClick = (event) => {
// setInputList(inputList.concat(<SetScenario key={inputList.length} />));
// };
return (
<>
<Head>
<title>Work Area | Cybersecurity Requirements Generator</title>
</Head>
<Box
component="main"
sx={{
alignItems: "center",
display: "flex",
flexGrow: 1,
minHeight: "100%",
}}
>
<Container maxWidth="xl">
<NextLink href="/projects" passHref>
<Button component="a" startIcon={<ArrowBackIcon fontSize="small" />}>
Back to Projects
</Button>
</NextLink>
<form onSubmit={formik.handleSubmit}>
<Box sx={{ my: 3 }}>
<Typography color="textPrimary" variant="h4">
Use Case Diagram
</Typography>
<Typography color="textSecondary" gutterBottom variant="body2">
Make your own diagram!
</Typography>
</Box>
<Box
sx={{
py: 2,
}}
>
{/* <div
dangerouslySetInnerHTML={{
__html:
"<img style='cursor:pointer;' title='Click to edit image' onclick='DiagramEditor.editElement(this);' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHkAAAA9CAYAAACJM8YzAAADT3RFWHRteGZpbGUAJTNDbXhmaWxlJTIwaG9zdCUzRCUyMmVtYmVkLmRpYWdyYW1zLm5ldCUyMiUyMG1vZGlmaWVkJTNEJTIyMjAyMS0wMS0xMVQxMCUzQTQxJTNBMzQuMjQ4WiUyMiUyMGFnZW50JTNEJTIyNS4wJTIwKE1hY2ludG9zaCUzQiUyMEludGVsJTIwTWFjJTIwT1MlMjBYJTIwMTFfMV8wKSUyMEFwcGxlV2ViS2l0JTJGNTM3LjM2JTIwKEtIVE1MJTJDJTIwbGlrZSUyMEdlY2tvKSUyMENocm9tZSUyRjg3LjAuNDI4MC44OCUyMFNhZmFyaSUyRjUzNy4zNiUyMiUyMGV0YWclM0QlMjJtNXI1QVhFdDE3eWx2WWlEWXo5UyUyMiUyMHZlcnNpb24lM0QlMjIxNC4xLjklMjIlMjB0eXBlJTNEJTIyZW1iZWQlMjIlM0UlM0NkaWFncmFtJTIwaWQlM0QlMjJlbVlSU0REUmtEUDJZZDNFWnkzciUyMiUyMG5hbWUlM0QlMjJQYWdlLTElMjIlM0VqWkxOVG9Rd0VJQ2ZwbGV6MEloNkZkZjE0Z2tUejVXT3ROblNrbElXOE9sdDdWUm9OaVplWU9hYjZmd1RXdmZMeWJKQnZCb09pcFFIdmhENlJNcXlxS283JTJGd3RramVTV1BrVFFXY2tqT215Z2tWJTJCQUx4T2RKSWNSV1VUT0dPWGtrTVBXYUEydHl4aXoxc3k1MjZkUmVkYUJkWkI1Qk5DMFRGM1RkOG1kaVBTJTJCckRiJTJCQXJJVEtYTlJZWDhmckQxMzFrd2E4Mm1qSVZwNmxzSmdEYU5nM013N1JJJTJCRTF0WVlGNlYlMkJxVUdGc2VZVGUlMkY3RGlpV1BiazFOcEZvdGFQZXZDS21KQzFNVHhuZ1RjZ3d1NGNQQ0ZtQjBOMWVaWmlFZE5BTnJnejc3a3lEMFViaGVlYTN3NG5VaFdPd0ZySU5saDdDd0U1Z2VuRjI5QzFyVDBOWmNuYmZsRkltSjNXSXFaQXp2b2ZzTnZNM0JDemlLcEc0NyUyQkxIdGJwd2V2d0UlM0QlM0MlMkZkaWFncmFtJTNFJTNDJTJGbXhmaWxlJTNFoE8CRAAABV1JREFUeF7tm1lIlVsYht+NXoSipGkIGpoDBYqiKIIQSCiRSigOCV2odZuSw51KoYaR8xCkGDmiaCDiVM5JSQiKoSiFaVk5UoKK4nz4Fmd73KmdvZX28ez1rZst7rXW/7/vs961vl/8FQB2wU2nHVAQ5J2dHZ0WKbM4PT29XQF5d5fDrIsLgbgyZF0ku08TQ9ZxwCSPITNkCRyQQCInmSFL4IAEEjnJDFkCBySQyElmyBI4IIFETjJDlsABCSRykhmyBA5IIJGTzJAlcEACiZxkhiyBAxJI5CQzZAkckEAiJ5khS+CABBJPTZLpRra3t6Gvry+B7dqVqDXI379/h5WV1ZHq2tvbERUVha9fvx7o8+DBA3z+/BmlpaVquaNpf7UmBfDlyxf09/cjNDRU3SEq/U46/lgX1eZ/a1JK5+bmxH2+f/8efn5+4tPMzEz8bnR09EjIk5OTWF9fx+XLl9XSqWl/tSYF0NjYiHv37uHTp0/qDlHpd9Lxx7qoNiHvv8GBgQG4u7tjfn4e5ubm4quOjg7cunULd+7cQUVFBc6fP4+ioiLR79mzZ5idnUViYiLq6+uRn58PmiMwMBCFhYUwNjZW0a9pfxqcnp6OyspKbG1twd/fHxkZGfTWwd68tHB8fHwwMTGB4OBgvHjxQqQ6ISEBHz58wLVr15CTk4Nz585hcXERtJvU1NSIRfzo0SM4OTkdGH9caJqO09p2rQ5kX19fBAUF4fbt28Iwejeru7sb9+/fB5mcnZ0tFkVtbS1MTEwQHx+PiIgIxMXFqejWtP/w8LAAUFxcLOal7fjp06fiXpRtdXUVeXl5yM3NRWtrKywtLWFhYYHo6GiEhITg8ePHWFpaQm9vLzIzM8WiffjwIV6+fImkpCT8/PlTzKkc7+bmpimrY/c/dZBXVlZgaGgojLx586YwTgktLS0N1tbWKCgoQGRkpDBubW0Nly5dOhSyuv3HxsZE+jw9PfHt2zcBmdJM193f9m+3BCsrKwtTU1NQKBQizXSczMzMIDU1Fe/evUNZWRkcHR3x9u1bENTOzs4TbffHpXyqINN2rTy337x5gytXrohXPJSQy8vLhbG0RVIjEJR4BweHQyGr25+KPToK6JgwMjISc9Eu8TvIlGA6Kn5ttCucPXsW4eHhAq6trS1iY2Nx9+7dE5/pOgF5f3V9GGQCSom7cOEC+vr6BAT6uaqq6lDI6vYnCJQ8OkNppwgLCxMJ/B3k5ORkvHr1Cj09PeLam5ubGBkZgYeHBz5+/IiLFy/ix48faGhoQExMjCgsx8fHOcn/BpkqW29vbwwNDYmEEAQqwJqamg6FrG7/gIAAAYWOgcHBQXENGpuSkqIyb3Nzs6gX6HGwq6tLFFuvX78WYKlQe/LkifiOzmhnZ2fQQlheXhbFGM07PT29N54mpp3gxo0bQsufbKdqu/4dZHrGpOdkSlldXZ2ovmlbfP78Oby8vA5A1qR/W1ubAEONCjt6vCMAtJhcXFz25iZIrq6u4rp0BtOWTsUgNbqf6upqXL16VRSL9Knc+umeS0pKBGTleJrbwMAALS0tuH79+p9k/P98q5EAbmxsHDiLj3JKnf70HE4QbGxsRCG1sLAAU1NTlccomp8esajYUwKkflRH2Nvb48yZM3u3QAUj/QHHzs5OFJLK9uv4P0r378n/kyRrQxhf4x8HGLIEq4EhM2QJHJBAIieZIUvggAQSOckMWQIHJJDISWbIEjgggUROMkOWwAEJJHKSGbIEDkggkZPMkCVwQAKJnGSGLIEDEkjkJDNkCRyQQCInmSFL4IAEEjnJDFkCBySQqJJkCfRKK1GhUOz+BbaftLWDFNYjAAAAAElFTkSuQmCC'/>",
}}
/> */}
<img
alt="Click to edit image"
onClick={EditDiagram.DiagramEditor.editElement(this)}
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHkAAAA9CAYAAACJM8YzAAADT3RFWHRteGZpbGUAJTNDbXhmaWxlJTIwaG9zdCUzRCUyMmVtYmVkLmRpYWdyYW1zLm5ldCUyMiUyMG1vZGlmaWVkJTNEJTIyMjAyMS0wMS0xMVQxMCUzQTQxJTNBMzQuMjQ4WiUyMiUyMGFnZW50JTNEJTIyNS4wJTIwKE1hY2ludG9zaCUzQiUyMEludGVsJTIwTWFjJTIwT1MlMjBYJTIwMTFfMV8wKSUyMEFwcGxlV2ViS2l0JTJGNTM3LjM2JTIwKEtIVE1MJTJDJTIwbGlrZSUyMEdlY2tvKSUyMENocm9tZSUyRjg3LjAuNDI4MC44OCUyMFNhZmFyaSUyRjUzNy4zNiUyMiUyMGV0YWclM0QlMjJtNXI1QVhFdDE3eWx2WWlEWXo5UyUyMiUyMHZlcnNpb24lM0QlMjIxNC4xLjklMjIlMjB0eXBlJTNEJTIyZW1iZWQlMjIlM0UlM0NkaWFncmFtJTIwaWQlM0QlMjJlbVlSU0REUmtEUDJZZDNFWnkzciUyMiUyMG5hbWUlM0QlMjJQYWdlLTElMjIlM0VqWkxOVG9Rd0VJQ2ZwbGV6MEloNkZkZjE0Z2tUejVXT3ROblNrbElXOE9sdDdWUm9OaVplWU9hYjZmd1RXdmZMeWJKQnZCb09pcFFIdmhENlJNcXlxS283JTJGd3RramVTV1BrVFFXY2tqT215Z2tWJTJCQUx4T2RKSWNSV1VUT0dPWGtrTVBXYUEydHl4aXoxc3k1MjZkUmVkYUJkWkI1Qk5DMFRGM1RkOG1kaVBTJTJCckRiJTJCQXJJVEtYTlJZWDhmckQxMzFrd2E4Mm1qSVZwNmxzSmdEYU5nM013N1JJJTJCRTF0WVlGNlYlMkJxVUdGc2VZVGUlMkY3RGlpV1BiazFOcEZvdGFQZXZDS21KQzFNVHhuZ1RjZ3d1NGNQQ0ZtQjBOMWVaWmlFZE5BTnJnejc3a3lEMFViaGVlYTN3NG5VaFdPd0ZySU5saDdDd0U1Z2VuRjI5QzFyVDBOWmNuYmZsRkltSjNXSXFaQXp2b2ZzTnZNM0JDemlLcEc0NyUyQkxIdGJwd2V2d0UlM0QlM0MlMkZkaWFncmFtJTNFJTNDJTJGbXhmaWxlJTNFoE8CRAAABV1JREFUeF7tm1lIlVsYht+NXoSipGkIGpoDBYqiKIIQSCiRSigOCV2odZuSw51KoYaR8xCkGDmiaCDiVM5JSQiKoSiFaVk5UoKK4nz4Fmd73KmdvZX28ez1rZst7rXW/7/vs961vl/8FQB2wU2nHVAQ5J2dHZ0WKbM4PT29XQF5d5fDrIsLgbgyZF0ku08TQ9ZxwCSPITNkCRyQQCInmSFL4IAEEjnJDFkCBySQyElmyBI4IIFETjJDlsABCSRykhmyBA5IIJGTzJAlcEACiZxkhiyBAxJI5CQzZAkckEAiJ5khS+CABBJPTZLpRra3t6Gvry+B7dqVqDXI379/h5WV1ZHq2tvbERUVha9fvx7o8+DBA3z+/BmlpaVquaNpf7UmBfDlyxf09/cjNDRU3SEq/U46/lgX1eZ/a1JK5+bmxH2+f/8efn5+4tPMzEz8bnR09EjIk5OTWF9fx+XLl9XSqWl/tSYF0NjYiHv37uHTp0/qDlHpd9Lxx7qoNiHvv8GBgQG4u7tjfn4e5ubm4quOjg7cunULd+7cQUVFBc6fP4+ioiLR79mzZ5idnUViYiLq6+uRn58PmiMwMBCFhYUwNjZW0a9pfxqcnp6OyspKbG1twd/fHxkZGfTWwd68tHB8fHwwMTGB4OBgvHjxQqQ6ISEBHz58wLVr15CTk4Nz585hcXERtJvU1NSIRfzo0SM4OTkdGH9caJqO09p2rQ5kX19fBAUF4fbt28Iwejeru7sb9+/fB5mcnZ0tFkVtbS1MTEwQHx+PiIgIxMXFqejWtP/w8LAAUFxcLOal7fjp06fiXpRtdXUVeXl5yM3NRWtrKywtLWFhYYHo6GiEhITg8ePHWFpaQm9vLzIzM8WiffjwIV6+fImkpCT8/PlTzKkc7+bmpimrY/c/dZBXVlZgaGgojLx586YwTgktLS0N1tbWKCgoQGRkpDBubW0Nly5dOhSyuv3HxsZE+jw9PfHt2zcBmdJM193f9m+3BCsrKwtTU1NQKBQizXSczMzMIDU1Fe/evUNZWRkcHR3x9u1bENTOzs4TbffHpXyqINN2rTy337x5gytXrohXPJSQy8vLhbG0RVIjEJR4BweHQyGr25+KPToK6JgwMjISc9Eu8TvIlGA6Kn5ttCucPXsW4eHhAq6trS1iY2Nx9+7dE5/pOgF5f3V9GGQCSom7cOEC+vr6BAT6uaqq6lDI6vYnCJQ8OkNppwgLCxMJ/B3k5ORkvHr1Cj09PeLam5ubGBkZgYeHBz5+/IiLFy/ix48faGhoQExMjCgsx8fHOcn/BpkqW29vbwwNDYmEEAQqwJqamg6FrG7/gIAAAYWOgcHBQXENGpuSkqIyb3Nzs6gX6HGwq6tLFFuvX78WYKlQe/LkifiOzmhnZ2fQQlheXhbFGM07PT29N54mpp3gxo0bQsufbKdqu/4dZHrGpOdkSlldXZ2ovmlbfP78Oby8vA5A1qR/W1ubAEONCjt6vCMAtJhcXFz25iZIrq6u4rp0BtOWTsUgNbqf6upqXL16VRSL9Knc+umeS0pKBGTleJrbwMAALS0tuH79+p9k/P98q5EAbmxsHDiLj3JKnf70HE4QbGxsRCG1sLAAU1NTlccomp8esajYUwKkflRH2Nvb48yZM3u3QAUj/QHHzs5OFJLK9uv4P0r378n/kyRrQxhf4x8HGLIEq4EhM2QJHJBAIieZIUvggAQSOckMWQIHJJDISWbIEjgggUROMkOWwAEJJHKSGbIEDkggkZPMkCVwQAKJnGSGLIEDEkjkJDNkCRyQQCInmSFL4IAEEjnJDFkCBySQqJJkCfRKK1GhUOz+BbaftLWDFNYjAAAAAElFTkSuQmCC"
/>
{/* <Tester /> */}
</Box>
<Box sx={{ my: 3 }}>
<Typography color="textPrimary" variant="h4">
Scenario
</Typography>
<Typography color="textSecondary" gutterBottom variant="body2">
Enter scenarios
</Typography>
</Box>
<SetScenario countList={countList} />
<Box
sx={{
alignItems: "center",
display: "flex",
ml: -1,
}}
></Box>
{Boolean(formik.touched.policy && formik.errors.policy) && (
<FormHelperText error>{formik.errors.policy}</FormHelperText>
)}
<Box
sx={{
py: 2,
display: "flex",
justifyContent: "flex-end",
justifyContent: "space-between",
}}
>
<Box>
<Button
color="primary"
disabled={formik.isSubmitting}
size="large"
variant="contained"
onClick={AddScenario}
sx={{
marginRight: 1,
}}
>
Add Row
</Button>
<Button
color="primary"
disabled={formik.isSubmitting}
size="large"
variant="contained"
onClick={DeleteScenario}
>
Delete Row
</Button>
</Box>
<NextLink href="/requirements" passHref>
<Button
color="primary"
disabled={formik.isSubmitting}
size="large"
type="submit"
variant="contained"
>
Submit
</Button>
</NextLink>
</Box>
</form>
</Container>
</Box>
</>
);
};
WorkArea.getLayout = (page) => <DashboardLayout>{page}</DashboardLayout>;
export default WorkArea;
keyboard hides the some text input , I'm trying to use keyboardAvoidingView. it has no effect here. ?
this is my code
SEE THE CODE BETWEEN *****
IF I wrap scroll view with keyboardavoidingView or I wrap KeyboardAvoidingView with scroll.. it is not changing anything here, I have tried both
//import statments
return (
<View style={style.MainContainer}>
<View style={style.chooseDpContainer}>
<TouchableOpacity onPress={openImagePickerAsync} style={style.chooseDpContainer}>
{(!ImageUrl)?(<><Avatar.Icon size={70} icon="camera-plus-outline" style={{marginEnd:10}} />
<Text>Choose a cool Dp for your Pet</Text></>):
(<><Avatar.Image size={70} source={{uri:ImageUrl}} style={{marginEnd:10}}/>
<Text>Choose another Image?</Text>
<Button mode="text" icon="delete" style={{fontSize:40}} onPress={()=>{
setImageUrl('')
}}>Remove</Button>
</>
)}
</TouchableOpacity>
</View>
<View style={style.divider} ></View>
<Text style={{marginBottom:10}}>Your Pet Details</Text>
{/* KEYBOARD HIDES INPUT, PLEASE REVIEW THIS CODE*/}
{/* *************************************************** */}
<KeyboardAvoidingView style={{width:'100%'}}
behavior={Platform.OS==="ios"?'padding':"height"}>
<ScrollView style={{width:'100%'}}>
{/* // behavior='position'> */}
<View style={style.Input}><TextInput label="Name"/></View>
<View style={style.Input}><TextInput label="Age"/></View>
<View style={style.Input}><TextInput label="Breed"/></View>
<View style={style.Input}><TextInput label="Gender"/></View>
</ScrollView>
</KeyboardAvoidingView>
{/* KEYBOARD HIDES INPUT, THANKS*/}
{/* *************************************************** */}
</View>
)
}
I am trying to position a React Native view at the bottom of my screen:
<TouchableHighlight onPress={() => this.logout()}>
<View style={{ position: "absolute", bottom: 0 }}>
<Text>{SignOut}</Text>
</View>
</TouchableHighlight>
And the parent:
<Fragment>
<View>
<ProfileSettings profile={this.state.profile} />
<MainSettings data={this.state} />
</View>
<LogoutSettings />
</Fragment>
And then the layout:
<Fragment>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
{/*<BackgroundProcess />*/}
<Header />
{this.props.children}
</SafeAreaView>
</Fragment>
As far as I can tell, this should get me all the way to the bottom...
However instead, my View centers right in the middle of the screen.
What am I doing wrong here? Is there a better way to position a view at the bottom of the screen? Plenty of tutorials say to use position absolute and bottom 0, but it does not appear to be working in my specific use case
You can do it without position absolute . Add "flex:1" to view before "LogoutSettings" so it will have full height and "LogoutSettings" will be shown at bottom
Try this in parent
<Fragment>
<View style={{flex:1}}>
<ProfileSettings profile={this.state.profile} />
<MainSettings data={this.state} />
</View>
<LogoutSettings />
</Fragment>
Remove position absolute
<TouchableHighlight onPress={() => this.logout()}>
<View >
<Text>{SignOut}</Text>
</View>
</TouchableHighlight>
I think you want the style on TouchableHighlight, not View
<TouchableHighlight onPress={() => this.logout()} style={{ position: "absolute", bottom: 0 }}>
<View>
<Text>{SignOut}</Text>
</View>
</TouchableHighlight>
You don't really need that View at all actually
I am setting option menu when click on icon,but it show menu sizes different rather than same. I am setting this menu as flat list item, and using react-native-popup-menu library, and any other way to display menu.I want to use menu options with fixed height and width of each of them.
Here is my code :-
_renderItem = ({item}) => {
return(
<TouchableOpacity onPress={() => this.handleListItemPress(item)}>
<View >
<View >
<View style={{flexDirection:'row',marginBottom:2}}>
<ImageView
image={item.pictures[0]}
style={[{marginRight:2},styles.imageStyle]}
/>
<ImageView
image={item.pictures[1]}
style={[{marginLeft:2},styles.imageStyle]}
/>
</View>
<View style={{flexDirection:'row',marginTop:2}}>
<ImageView
style={[{marginRight:2},styles.imageStyle]}
image={item.pictures[2]}
/>
<ImageView
image={item.pictures[3]}
style={[{marginLeft:2},styles.imageStyle]}
/>
</View>
</View>
<View>
<TextViewNonClickable
textViewText={item.name}
/>
<TextViewNonClickable
textViewText={item.description}
/>
</View>
<MenuProvider>
<Menu style={{position:'absolute',top:8,right:8}}>
<MenuTrigger >
<Icon
name = 'more-vertical'
type = 'feather'
color = {color.colorWhite}
iconStyle={{padding:12}}
size={24}
/>
</MenuTrigger>
<MenuOptions >
<MenuOption >
<Text >edit</Text>
</MenuOption>
<MenuOption>
<Text >delete</Text>
</MenuOption>
</MenuOptions>
</Menu>
</MenuProvider>
</View>
</TouchableOpacity>
)
}
Please pass customStyles as a prop to MenuOptions and MenuOption.
<MenuOptions optionsContainerStyle={{width:100,height:60}}>
<MenuOption customStyles={{width:100,height:30}}/>
</MenuOptions>
I have done it,but i could not show menus overs the text
and here is my new code :-
<MenuProvider>
<Menu style={{position:'absolute',top:0,right:0}}>
<MenuTrigger >
<Icon
name = 'more-vertical'
type = 'feather'
color = {color.colorWhite}
iconStyle={{padding:12}}
size={24}
/>
</MenuTrigger>
<MenuOptions optionsContainerStyle=
{{paddingLeft:8,height:96,width:100}}>
<MenuOption customStyles={{height:48,width:100}}>
<Text
style={{fontWeight:'bold',paddingTop:8}}
onPress={() =>
this.openAddOrUpdateModal('update',item)}
>edit</Text>
</MenuOption>
<MenuOption customStyles={{height:48,width:100}}>
<Text style=
{{fontWeight:'bold',paddingTop:8}}>delete</Text>
</MenuOption>
</MenuOptions>
</Menu>
</MenuProvider>