I have a problem with bottom nav when I focus on a input
When I focus on that input field bottom nav be hide but that grey box is before it.
I wanna know how I can delete that box
const TabBarComponent = props => <BottomTabBar {...props} />;
{
initialRouteName: "showFlow",
tabBarComponent: props => (
<TabBarComponent {...props} style={styles.bottomNav} />
),
tabBarOptions: {
inactiveTintColor: colors.grey,
activeTintColor: colors.background1
}
}
Try setting keyboardHidesTabBar from https://reactnavigation.org/docs/bottom-tab-navigator#tabbaroptions to false.
finally i did find a way for solve that problem:
import { Keyboard } from "react-native";
const TabBarComponent = props => {
const [show, setShow] = useState(false);
useEffect(() => {
let keyboardDidShowListener = Keyboard.addListener(
"keyboardDidShow",
_keyboardDidShow
);
let keyboardDidHideListener = Keyboard.addListener(
"keyboardDidHide",
_keyboardDidHide
);
return () => {
keyboardDidShowListener.remove();
keyboardDidHideListener.remove();
};
}, []);
const _keyboardDidHide = () => setShow(false);
const _keyboardDidShow = () => setShow(true);
return (
<BottomTabBar
{...props}
style={{ height: show ? 0 : 80, backgroundColor: colors.background1 }}
/>
);
};
Related
So I have this component set up, which has an onClick handler to like or unlike a certain recipe. I am using the useEffect hook to make sure that the icon is changed accordingly based on the favoriteId prop. When the onClick and the associated queries are executed however, the useEffect hook is not triggered at all, how come?
const RecipeCard = ({ name, image, id, favoriteId }) => {
const { user } = useContext(AuthenticatedUserContext);
const [isFavorite, setIsFavorite] = useState(false);
const onLikePress = async () => {
if (favoriteId) {
await deleteDoc(doc(db, "favorites", favoriteId));
favoriteId = null;
} else {
const res = await addDoc(collection(db, "favorites"), {
userId: user.uid,
recipeId: id,
});
favoriteId = res.id;
}
};
useEffect(() => {
console.log("hit");
favoriteId ? setIsFavorite(true) : setIsFavorite(false);
}, [favoriteId]);
return (
<TouchableWithoutFeedback
onPress={onPress}
style={{ flex: 1, padding: 10 }}
>
<View>
<AntDesign
onPress={() => {
if (!user) {
setShowNoAccountModal(true);
} else {
onLikePress();
}
}}
name={isFavorite ? "like1" : "like2"}
color="black"
size={30}
/>
</View>
</TouchableWithoutFeedback>
);
};
export default RecipeCard;
Parent component:
export const HomeScreen = () => {
const [recipes, setRecipes] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
getRecipes();
}, []);
const getRecipes = async () => {
const querySnapshot = await getDocs(collection(db, "receipes"));
const fetchedRecipes = [];
for (const d of querySnapshot.docs) {
const citiesRef = collection(db, "favorites");
const q = query(
citiesRef,
where("userId", "==", user.uid),
where("recipeId", "==", d.id)
);
const querySnapshot = await getDocs(q);
const isFavorite = false;
if (querySnapshot.empty) {
favoriteId = null;
} else {
favoriteId = querySnapshot.docs[0].id;
}
const recipe = {
...d.data(),
id: d.id,
favoriteId,
};
fetchedRecipes.push(recipe);
}
setRecipes(fetchedRecipes);
setLoading(false);
};
return (
<View style={styles.container}>
{/* <Button title="Sign Out" onPress={handleLogout} /> */}
<Text style={{ fontSize: 24, fontWeight: "bold", paddingBottom: 10 }}>
Recepten
</Text>
{recipes && recipes.length > 0 && (
<FlatList
data={recipes}
renderItem={({ item }) => (
<RecipeCard
name={item.title}
id={item.id}
image={item.thumbnail}
favoriteId={favoriteId}
/>
)}
keyExtractor={(item) => item.id}
horizontal
/>
)}
</View>
);
};
You are mutating your favoriteId variable, but not using setState, so it is not done properly and react is unaware your variable might have changed.
To fix this, you will need to pass a function to change your favoriteId prop inside of your component's parent:
// in parent:
const [favoriteId, setFavoriteId] = useState() // this code should be here already
return (
// your code here
<RecipeCard changeFavoriteId={(newId) => setFavoriteId(newId)} />
// just add this changeFavoriteId prop, the old props should be here still though
// rest of your code
)
// in RecipeCard.js
const RecipeCard = ({ name, image, id, favoriteId, changeFavoriteId }) => {
// your code here
const onLikePress = async () => {
if (favoriteId) {
await deleteDoc(doc(db, "favorites", favoriteId));
favoriteId = null;
} else {
const res = await addDoc(collection(db, "favorites"), {
userId: user.uid,
recipeId: id,
});
changeFavoriteId(res.id) // this bit here changed, now you are using setState
}
};
// the rest of your code
By using setState function that you obtained from parent useState, your component will trigger a rerender after the value is changed.
Here is my useEffect Call:
const ref = useRef(null);
useEffect(() => {
const clickListener = (e: MouseEvent) => {
if (ref.current.contains(e.target as Node)) return;
closePopout();
}
document.addEventListener('click', clickListener);
return () => {
document.removeEventListener('click', clickListener);
closePopout();
}
}, [ref, closePopout]);
I'm using this to control a popout menu. When you click on the menu icon to bring up the menu it will open it up. When you click anywhere that isn't the popout it closes the popout. Or when the component gets cleaned up it closes the popout as well.
I'm using #testing-library/react-hooks to render the hooks:
https://github.com/testing-library/react-hooks-testing-library
We are also using TypeScript so if there is any TS specific stuff that would be very helpful as well.
Hopefully this is enough info. If not let me know.
EDIT:
I am using two companion hooks. I'm doing quite a bit in it and I was hoping to simplify the question but here is the full code for the hooks. The top hook (useWithPopoutMenu) is called when the PopoutMenu component is rendered. The bottom one is called inside the body of the PopoutMenu component.
// for use when importing the component
export const useWithPopoutMenu = () => {
const [isOpen, setIsOpenTo] = useState(false);
const [h, setHorizontal] = useState(0);
const [v, setVertical] = useState(0);
const close = useCallback(() => setIsOpenTo(false), []);
return {
isOpen,
menuEvent: {h, v, isOpen, close} as PopoutMenuEvent,
open: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
setIsOpenTo(true);
setHorizontal(e.clientX);
setVertical(e.clientY);
},
close
};
}
type UsePopoutMenuArgs = {
menuEvent: PopoutMenuEvent
padding: number
tickPosition: number
horizontalFix: number | null
verticalFix: number | null
hPosition: number
vPosition: number
borderColor: string
}
// for use inside the component its self
export const usePopoutMenu = ({
menuEvent,
padding,
tickPosition,
horizontalFix,
verticalFix,
hPosition,
vPosition,
borderColor
}: UsePopoutMenuArgs) => {
const ref = useRef() as MutableRefObject<HTMLDivElement>;
useEffect(() => {
const handleClick = (e: MouseEvent) => {
if (ref.current.contains(e.target as Node)) return;
menuEvent.close();
}
document.addEventListener('click', handleClick);
return () => {
document.removeEventListener('click', handleClick);
menuEvent.close();
}
}, [menuEvent.close, ref]);
const menuContainerStyle = useMemo(() => {
const left = horizontalFix || menuEvent.h;
const top = verticalFix || menuEvent.v;
return {
padding,
left,
top,
marginLeft: hPosition,
marginTop: vPosition,
border: `1px solid ${borderColor}`
}
}, [
padding,
horizontalFix,
verticalFix,
menuEvent,
hPosition,
vPosition,
borderColor
]);
const backgroundArrowStyle = useMemo(() => {
return {
marginLeft: `-${padding + 6}px`,
marginTop: 4 - padding + tickPosition,
}
},[padding, tickPosition]);
const foregroundArrowStyle = useMemo(() => {
return {
marginLeft: `-${padding + 5}px`,
marginTop: 4 - padding + tickPosition,
}
},[padding, tickPosition]);
return {
ref,
menuContainerStyle,
backgroundArrowStyle,
foregroundArrowStyle
}
}
Here is the component:
type PopoutMenuProps = {
children: React.ReactChild | React.ReactChild[] // normal props.children
menuEvent: PopoutMenuEvent
padding?: number // padding that goes around the
tickPosition?: number // how far down the tick is from the top
borderColor?: string // border color
bgColor?: string // background color
horizontalFix?: number | null
verticalFix?: number | null
vPosition?: number
hPosition?: number
}
const Container = styled.div`
position: fixed;
display: block;
padding: 0;
border-radius: 4px;
background-color: white;
z-index: 10;
`;
const Arrow = styled.div`
position: absolute;
`;
const PopoutMenu = ({
children,
menuEvent,
padding = 16,
tickPosition = 10,
borderColor = Style.color.gray.medium,
bgColor = Style.color.white,
vPosition = -20,
hPosition = 10,
horizontalFix = null,
verticalFix = null
}: PopoutMenuProps) => {
const binding = usePopoutMenu({
menuEvent,
padding,
tickPosition,
vPosition,
hPosition,
horizontalFix,
verticalFix,
borderColor
});
return (
<Container ref={binding.ref} style={binding.menuContainerStyle}>
<Arrow style={binding.backgroundArrowStyle}>
<Left color={borderColor} />
</Arrow>
<Arrow style={binding.foregroundArrowStyle}>
<Left color={bgColor} />
</Arrow>
{children}
</Container>
);
}
export default PopoutMenu;
Usage is something like this:
const Parent () => {
const popoutMenu = useWithPopoutMenu();
return (
...
<ComponentThatOpensThePopout onClick={popoutMenu.open}>...
...
{popoutMenu.isOpen && <PopoutMenu menuEvent={menuEvent}>PopoutMenu Content</PopoutMenu>}
);
}
Do you need to test the hook in isolation?
Testing the component that consumes the hook would be much easier and it would also be a more realistic test, pseudo code below:
render(<PopoverConsumer />);
userEvent.click(screen.getByRole('button', { name: 'Menu' });
expect(screen.getByRole('dialog')).toBeInTheDocument();
userEvent.click(screen.getByText('somewhere outside');
expect(screen.getByRole('dialog')).not.toBeInTheDocument();
The issue is keydown/keyup aren't working when mention list popup has scroll , i can scroll using mouse but keyup/keydown aren't making the scroll move to the right position
This can be achieved by custom entry Component ->
const entryComponent = (props:any) => {
const { mention, isFocused, searchValue, ...parentProps } = props;
const entryRef = React.useRef<HTMLDivElement>(null);
useEffect(() => {
if (isFocused) {
if (entryRef.current && entryRef.current.parentElement) {
entryRef.current.scrollIntoView({
block: 'nearest',
inline: 'center',
behavior: 'auto'
});
}}
}, [isFocused]);
return (
<>
<div
ref={entryRef}
role='option'
aria-selected={(isFocused ? 'true' : 'false')}
{...parentProps}>
<div className={'mentionStyle'}>
{mention.name}
</div>
</div>
</> );
};
In my React Native application, I use React Navigation.
It's an app that enables the user to search an underlying database, i.e. for names. The GIF below illustrates the navigation.
From the landing screen, Go to search button is pressed (Main Stack Navigator) --> The Header appears, which is alright.
On the second screen, there is a bottomTabNavigator, where names is chosen (in names, there is a second StackNavigator nested).
This leads to the third screen. Here, three cards are shown. With the help of the second StackNavigator, clicking on Mehr opens a details screen.
What I want to achieve is that the Header of the first StackNavigator (that one at the top) disappears as soon as the user opens the details screen.
You see a button there because in the first step, I wanted to let the Header disappear on button click.
The below code works if it is implemented in a screen that is derived from the first StackNavigator directly. But because I am inside a nested navigator, it does not work anymore.
Here is the code:
App.tsx:
imports ...
class RootComponent extends React.Component {
render() {
const image = require('./assets/images/corrieBackground3.png');
console.log('calling the store', this.props.resultValue); // undefined
return (
<View style={styles.container}>
<LandingPage />
</View>
);
}
}
const RootStack = createStackNavigator(
{
LandingPage: {
screen: RootComponent,
navigationOptions: {
header: null,
},
},
SearchScreen: {
screen: SearchScreen,
navigationOptions: {
title: 'I SHOULD DISAPPEAR',
},
},
},
{
initialRouteName: 'LandingPage',
},
);
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
TwoTabs.tsx (for the 2nd screen):
imports ...
const SearchBarStack = createStackNavigator(
{
SearchBar: {
screen: SearchBar,
navigationOptions: {
header: null,
},
},
Details: {
screen: Details,
navigationOptions: {
title: 'I am here, above header disapear',
},
},
},
{
initialRouteName: 'SearchBar',
},
);
const TabNavigator = createBottomTabNavigator(
{
One: {
screen: SearchCriteria,
navigationOptions: {
tabBarLabel: 'criteria',
},
},
Two: {
screen: SearchBarStack,
navigationOptions: {
tabBarLabel: 'names',
},
},
},
);
const TabLayout = createAppContainer(TabNavigator);
type Props = {};
const TwoTabsHorizontal: React.FC<Props> = ({}) => {
return (
<View>
<TabLayout />
</View>
);
};
export default TwoTabs;
SearchBar.tsx (3rd screens skeleton):
import ...
type Props = {};
const SearchBar: React.FC<Props> = () => {
// logic to perform database query
return (
<View>
<ScrollView>
... logic
<SearchResult></SearchResult> // component that renders 3 cards
</ScrollView>
</View>
);
};
export default SearchBar;
Card.tsx (card rendered by SearchResult):
imports ...
type Props = {
title: string;
navigation: any;
};
const Card: React.FC<Props> = ({title, navigation}) => {
return (
<Content>
<Card>
<CardItem>
<Right>
<Button
transparent
onPress={() => navigation.navigate('Details')}>
<Text>Mehr</Text>
</Button>
</Right>
</CardItem>
</Card>
</Content>
);
};
export default withNavigation(Card);
And finally, the Details screen together with its Content. Here, the Header from the first StackNavigator should be hidden.
imports ...
type Props = {};
const Details: React.FC<Props> = ({}) => {
return (
<View>
<Content></Content>
</View>
);
};
export default Details;
imports ...
type Props = {
navigation: any;
};
class Content extends React.Component {
state = {
showHeader: false,
};
static navigationOptions = ({navigation}) => {
const {params} = navigation.state;
return params;
};
hideHeader = (hide: boolean) => {
this.props.navigation.setParams({
headerShown: !hide,
});
console.log('props ', this.props.navigation);
};
render() {
return (
<View>
<View>
</View>
<Button
title={'Press me and the header will disappear!'}
onPress={() => {
this.setState({showHeader: !this.state.showHeader}, () =>
this.hideHeader(this.state.showHeader),
);
}}
/>
</View>
);
}
}
export default withNavigation(CardExtended);
Maybe someone has an idea?
What I am trying to do
I need to animate a View's background color when a text input is focused.
What I did until now
I built a component that has two functions, onFocus and onBlur - it's just an event function from react-native-reanimated.
const onFocus = event<NativeSyntheticEvent<TextInputFocusEventData>>([
{
nativeEvent: ({ target }) => set(colorAnimation, 1)
}
]);
const onBlur = event<NativeSyntheticEvent<TextInputFocusEventData>>([
{
nativeEvent: ({ target }) => set(colorAnimation, 0)
}
]);
I am passing this function to an Animated TextInput, I get no error on console and it shows the custom background color that I've set. But not changing on Focus or Blur.
Code
I am using typescript
import React from 'react';
import { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
import Reanimated from 'react-native-reanimated';
import { bInterpolateColor } from 'react-native-redash';
import styled from 'styled-components/native';
const { Clock, Value, event, set, debug, block, divide } = Reanimated;
const StyledTextInput = styled.TextInput`
height: 40px;
padding: ${props => props.theme.spacing.default * 2}px
${props => props.theme.spacing.default * 3}px;
`;
const AnimatedTextInput: typeof StyledTextInput = Reanimated.createAnimatedComponent(
StyledTextInput
);
const Container = styled(Reanimated.View)`
width: 100%;
border: 1px solid ${props => props.theme.colors.border};
background: #e3e7eb;
border-radius: ${props => props.theme.shapping.borderRadius * 2};
`;
const TextInput = () => {
const clock = new Clock();
const colorAnimation = new Value(0);
const onFocus = event<NativeSyntheticEvent<TextInputFocusEventData>>([
{
nativeEvent: ({ target }) => set(colorAnimation, 1)
}
]);
const onBlur = event<NativeSyntheticEvent<TextInputFocusEventData>>([
{
nativeEvent: ({ target }) => set(colorAnimation, 0)
}
]);
return (
<Container
style={{
backgroundColor: bInterpolateColor(
colorAnimation,
{ r: 255, g: 0, b: 0 },
{ r: 0, g: 0, b: 255 }
)
}}
>
<AnimatedTextInput onFocus={onFocus} onBlur={onBlur} />
</Container>
);
};
export default TextInput;
Result
from what I can see you're not using binterpolatecolor correctly.
from the doc:
const bInterpolateColor: (value: Animated.Adaptable<number>, color1: string | number, color2: string | number, colorSpace?: "hsv" | "rgb") => Animated.Node<number>;
you are not providing the colorspace (but this is optional so I don't know how relevant that is), also color 1 and color 2 can only be string or number and you've given an object it seems.
so that's the first problem, I am also not sure if your container component will update without some sort of state change via setstate(), but I could be wrong as I'm not a reanimated expert by any means.