Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

In Screen component when i wrap any children with style position: "absolute", children not visible #2858

Closed
KartikDevarde2601 opened this issue Dec 2, 2024 · 1 comment
Labels

Comments

@KartikDevarde2601
Copy link

KartikDevarde2601 commented Dec 2, 2024

Describe the bug

I not figure-outing the issue here or i am doing something wrong or it an issue .
below code is working properly

return (
    <View style={$root}>
      <Button
        RightAccessory={(props) => (
          <Icon
            icon="plus"
            style={props.style}
            size={props.pressableState.pressed ? 35 : 30}
            color={props.pressableState.pressed ? colors.tintactive : colors.tint}
          />
        )}
        preset="default"
        style={[$fab, { backgroundColor: theme.colors.palette.primary100 }]}
        pressedStyle={$fabpress}
        onPress={() => console.log("add device")}
      ></Button>
    </View>
  )
})

const $root: ViewStyle = {
  flex: 1,
  position: "relative",
}

const $fab: ViewStyle = {
  position: "absolute",
  bottom: 30,
  right: 30,
  borderRadius: 16,
  alignItems: "center",
  justifyContent: "center",
  zIndex: 1,
}

const $fabpress: ViewStyle = {
  backgroundColor: colors.palette.primary200,
}
Screenshot_20241202_114101_sensorhub

Issue

when i add the Screen component and wrap the floating button the button is not visible also try add View Component between Screen and Button

 return (
    <Screen style={$root}>
      <Button
        RightAccessory={(props) => (
          <Icon
            icon="plus"
            style={props.style}
            size={props.pressableState.pressed ? 35 : 30}
            color={props.pressableState.pressed ? colors.tintactive : colors.tint}
          />
        )}
        preset="default"
        style={[$fab, { backgroundColor: theme.colors.palette.primary100 }]}
        pressedStyle={$fabpress}
        onPress={() => console.log("add device")}
      ></Button>
    </Screen>
  )
})
Screenshot_20241202_114101_sensorhub

Ignite version

10.0.5

Additional info

System
platform linux
arch x64
cpu 12 cores 11th Gen Intel(R) Core(TM) i5-11500 @ 2.70GHz
directory sensorhub /home/bioztwo/Documents/GitHub/sensorhub

JavaScript (and globally-installed packages)
node 20.16.0 /home/bioztwo/.nvm/versions/node/v20.16.0/bin/node
npm 10.8.1 /home/bioztwo/.nvm/versions/node/v20.16.0/bin/npm
@nestjs/cli 10.4.7
corepack 0.28.2
nodemon 3.1.7
npm-check-updates 17.1.11
npm 10.8.1
typescript 5.6.3
yarn 1.22.22
yarn 1.22.22 /home/bioztwo/.nvm/versions/node/v20.16.0/bin/yarn
pnpm - not installed
bun 1.1.28 /home/bioztwo/.bun/bin/bun
expo 51.0.39 managed

Ignite
ignite-cli 10.0.5 /home/bioztwo/.npm/_npx/e31027f3785124a8/node_modules/.bin/ignite
ignite src build /home/bioztwo/.npm/_npx/e31027f3785124a8/node_modules/ignite-cli/build

Android
java 17.0.11 /home/bioztwo/.sdkman/candidates/java/current/bin/java
android home - /home/bioztwo/Android/Sdk

Tools
git git version 2.43.0 /usr/bin/git
bioztwo@bioztwo-OptiPlex-5090:~/Documents/GitHub/sensorhub$

@KartikDevarde2601
Copy link
Author

Sorry i am doing it Wrong way after review Demo app it solve

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant