Comments (6)
If you're using KeyboardAvoidingView, try adding pointerEvents="box-none".
from gluestack-ui.
please share the full contents of your package.json
file, I need to check the versions of few packages.
from gluestack-ui.
Hello, @rajat693 . Here it is:
"name": "myApp",
"version": "0.0.1",
"private": true,
"scripts": {
...
},
"dependencies": {
"@gluestack-style/react": "^1.0.52",
"@gluestack-ui/config": "^1.1.18",
"@gluestack-ui/themed": "^1.1.22",
"@hookform/resolvers": "^3.3.4",
"@react-native-async-storage/async-storage": "^1.23.1",
"@react-navigation/native": "^6.1.17",
"@react-navigation/native-stack": "^6.9.26",
"@reduxjs/toolkit": "^2.2.3",
"react": "18.2.0",
"react-hook-form": "^7.51.3",
"react-native": "0.73.6",
"react-native-linear-gradient": "^2.8.3",
"react-native-safe-area-context": "^4.9.0",
"react-native-screens": "^3.30.1",
"react-native-svg": "^13.4.0",
"react-native-vector-icons": "^10.0.3",
"react-redux": "^9.1.0",
"yup": "^1.4.0"
},
"devDependencies": {
...
},
"engines": {
"node": ">=18"
}
}
from gluestack-ui.
@rajat693 hey, Rajat! Is there anything else you'd need?
from gluestack-ui.
If you're using KeyboardAvoidingView, try adding pointerEvents="box-none".
@zainkhas thanks for you suggestion! Unfortunately that didn't work. @rajat693 Here's the structure of the host screen:
const Screen = () => {
return (
<SafeAreaView flex={1} bg="$white">
<VStack flex={1} bg="$white" px={px} gap="$3" paddingTop={0} alignItems="center" justifyContent="center">
{isLoading ? (
<LoaderIcon />
) : (
<KeyboardAvoidingView
flex={1}
behavior={isIos ? 'padding' : 'height'}
keyboardVerticalOffset={isKeyboardVisible ? (isIos ? 100 : keyboardHeight) : undefined}
pointerEvents="box-none"
>
<ScrollView flex={1}>
<VStack gap="$1" pt="$5" pb="$8">
{configurations
? Object.values(configurations)?.map(field => {
return <ConfigurationInput key={field.name} field={field} chargePointId={chargePoint?.id} />;
})
: null}
<GradientButton
startIcon={<SaveIcon color={white} />}
label={t('labels.save-changes')}
onPress={goToReboot}
disabled={isPending}
/>
</VStack>
</ScrollView>
</KeyboardAvoidingView>
)}
</VStack>
</SafeAreaView>
);
};
The Actionsheet lives inside the ConfigurationInput component. Here's its code:
return (
<>
<VStack>
<Text ml="$2" variant="caption">
{label}
</Text>
<Pressable onPress={() => setIsOpen(true)}>
<HStack
justifyContent="space-between"
borderColor={getInputBorderColor({ error, isSuccess, isPending })}
bg="$bluePrimary"
borderRadius="$lg"
borderWidth="$1"
px="$3"
h="$10"
alignItems="center"
>
<Text variant="description" numberOfLines={1} maxWidth="85%">
{selected.join(', ')}
</Text>
<Arrow direction={isOpen ? 'up' : 'down'} />
</HStack>
</Pressable>
<InputMessage message={warning ?? error} type={warning ? 'warning' : 'error'} />
</VStack>
<Actionsheet bg="$bluePrimary" isOpen={isOpen} onClose={onClose} zIndex={-1}>
<ActionsheetBackdrop />
<ActionsheetContent pb="$12" maxHeight={screenHeight * 0.6}>
<ActionsheetDragIndicatorWrapper>
<ActionsheetDragIndicator />
</ActionsheetDragIndicatorWrapper>
<VStack gap="$3">
<ActionsheetScrollView w="$full">
<VStack gap="$2" w="$full" pt="$4">
{items.map(({ value, label }) => {
const isSelected = selected.includes(value);
return (
<ActionsheetItem
key={value}
onPress={() => onItemPress(value)}
justifyContent="space-between"
bg="$bluePrimary"
borderRadius="$lg"
>
<ActionsheetItemText>{label}</ActionsheetItemText>
{/* Aria-label is necessary due to a typing bug in gluestack */}
<Checkbox
value={value}
isChecked={isSelected}
aria-label="checkbox"
onChange={() => onItemPress(value)}
>
<CheckboxIndicator mr="$2">
<CheckboxIcon as={Check} />
</CheckboxIndicator>
</Checkbox>
</ActionsheetItem>
);
})}
</VStack>
</ActionsheetScrollView>
<GradientButton onPress={handleSubmit} label={t('labels.save')} />
</VStack>
</ActionsheetContent>
</Actionsheet>
</>
);
};
from gluestack-ui.
Hi @ydlooming,
I tried to debug your issue, but it works fine for me. I'm attaching the GitHub repo below. If you still have issues, please share a GitHub repo or a minimal codebase that demonstrates the problem.
repo - https://github.com/rajat693/rn-actionsheet-themed
Thank you.
from gluestack-ui.
Related Issues (20)
- AddIcon doesn't exist? HOT 3
- Switch activeThumbColor type error HOT 4
- Indeterminate progress bar HOT 1
- :initial doesn't animate when placed in sx HOT 1
- use Eject Theme alias ts loses effect HOT 1
- Styled component type errors HOT 3
- Compatilibity with Expo SDK 51 HOT 5
- Just question HOT 1
- Size prop is not working correctly in Icon component HOT 1
- Issues with expo 51 HOT 7
- if the text too long, the toast will overflow. HOT 1
- TypeScript Intellisense VSCode slows after Eject Theme HOT 1
- ModalBackdrop not covering bottom navigation on Android. HOT 6
- The Popover of Android is inconsistent with iOS, and Android is relatively ugly HOT 3
- ModalBackdrop is not working HOT 1
- Nativewind TextInput and TextArea does not apply custom colors defined from config HOT 1
- SVG descendant styles not being applied in dark mode HOT 1
- Not all media query types appear in useMedia hook HOT 1
- Documentation typo HOT 1
- Tests on new project dont pass HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gluestack-ui.