React Native
This package provides React Native bindings for
@floating-ui/core
— a library that provides anchor positioning
for a floating element to position it next to a given reference
element.
Install
npm install @floating-ui/react-native
npm install @floating-ui/react-native
Usage
The useFloating()
useFloating()
hook accepts all of
computePosition
’s options
excluding strategy
strategy
.
import {View, Text} from 'react-native';
import {useFloating, shift} from '@floating-ui/react-native';
function App() {
const {refs, floatingStyles} = useFloating({
middleware: [shift()],
});
return (
<View>
<View ref={refs.setReference} collapsable={false}>
<Text>Reference</Text>
</View>
<View
ref={refs.setFloating}
collapsable={false}
style={floatingStyles}
>
<Text>Floating</Text>
</View>
</View>
);
}
import {View, Text} from 'react-native';
import {useFloating, shift} from '@floating-ui/react-native';
function App() {
const {refs, floatingStyles} = useFloating({
middleware: [shift()],
});
return (
<View>
<View ref={refs.setReference} collapsable={false}>
<Text>Reference</Text>
</View>
<View
ref={refs.setFloating}
collapsable={false}
style={floatingStyles}
>
<Text>Floating</Text>
</View>
</View>
);
}
This will position the floating element at the bottom center of the reference element by default.
refs.setReference
refs.setReference
is the reference (or anchor) element that is being referred to for positioning.refs.setFloating
refs.setFloating
is the floating element that is being positioned relative to the reference element.floatingStyles
floatingStyles
is an object of positioning styles to apply to the floating element’sstyle
style
prop.
The refs are functions to make them reactive — this ensures changes to the reference or floating elements, such as with conditional rendering, are handled correctly by updating the position.
Updating
useFloating()
useFloating()
only calculates the position once on
render, or when the reference/floating elements changed.
Depending on the context in which the floating element lives, you
may need to update its position in an effect.
The hook returns an update()
update()
function to update the
position:
const {update} = useFloating();
const {update} = useFloating();
Refs
To access the elements, you can either access the refs:
const {refs} = useFloating();
// Inside an effect or event handler:
refs.reference.current;
refs.floating.current;
const {refs} = useFloating();
// Inside an effect or event handler:
refs.reference.current;
refs.floating.current;
Or the elements directly:
const {elements} = useFloating();
// During render, unlike the refs:
elements.reference;
elements.floating;
const {elements} = useFloating();
// During render, unlike the refs:
elements.reference;
elements.floating;
External elements can be synchronized like so, if they live outside the component:
function MyComponent({referenceEl, floatingEl}) {
const {refs} = useFloating({
elements: {
reference: referenceEl,
floating: floatingEl,
},
});
}
function MyComponent({referenceEl, floatingEl}) {
const {refs} = useFloating({
elements: {
reference: referenceEl,
floating: floatingEl,
},
});
}
ScrollView
When your floating element is portaled to the app root, while the
reference element is inside a <ScrollView />
<ScrollView />
, you pass
the sameScrollView
sameScrollView
option, and spread
scrollProps
scrollProps
to the component:
import {View, Text, ScrollView} from 'react-native';
import {useFloating} from '@floating-ui/react-native';
function App() {
const {refs, floatingStyles, scrollProps} = useFloating({
sameScrollView: false,
});
return (
<View>
<ScrollView {...scrollProps}>
<View ref={refs.setReference} collapsable={false}>
<Text>Reference</Text>
</View>
</ScrollView>
<View
ref={refs.setFloating}
collapsable={false}
style={floatingStyles}
>
<Text>Floating</Text>
</View>
</View>
);
}
import {View, Text, ScrollView} from 'react-native';
import {useFloating} from '@floating-ui/react-native';
function App() {
const {refs, floatingStyles, scrollProps} = useFloating({
sameScrollView: false,
});
return (
<View>
<ScrollView {...scrollProps}>
<View ref={refs.setReference} collapsable={false}>
<Text>Reference</Text>
</View>
</ScrollView>
<View
ref={refs.setFloating}
collapsable={false}
style={floatingStyles}
>
<Text>Floating</Text>
</View>
</View>
);
}
offsetParent
Pass this to the floating element’s `offsetParent“, if required:
import {View, Text, ScrollView} from 'react-native';
import {useFloating} from '@floating-ui/react-native';
function App() {
const {refs, floatingStyles} = useFloating({
sameScrollView: false,
});
return (
<View>
<ScrollView>
<View ref={refs.setReference} collapsable={false}>
<Text>Reference</Text>
</View>
</ScrollView>
<View ref={refs.setOffsetParent} collapsable={false}>
<View
ref={refs.setFloating}
collapsable={false}
style={floatingStyles}
>
<Text>Floating</Text>
</View>
</View>
</View>
);
}
import {View, Text, ScrollView} from 'react-native';
import {useFloating} from '@floating-ui/react-native';
function App() {
const {refs, floatingStyles} = useFloating({
sameScrollView: false,
});
return (
<View>
<ScrollView>
<View ref={refs.setReference} collapsable={false}>
<Text>Reference</Text>
</View>
</ScrollView>
<View ref={refs.setOffsetParent} collapsable={false}>
<View
ref={refs.setFloating}
collapsable={false}
style={floatingStyles}
>
<Text>Floating</Text>
</View>
</View>
</View>
);
}
Arrow
A ref
ref
can be passed as the element
element
:
import {useRef} from 'react';
import {useFloating, arrow} from '@floating-ui/react-native';
function App() {
const arrowRef = useRef();
const {
refs,
floatingStyles,
middlewareData: {arrow: {x: arrowX, y: arrowY} = {}},
} = useFloating({
middleware: [arrow({element: arrowRef})],
});
// Pass the `arrowRef` to the element
}
import {useRef} from 'react';
import {useFloating, arrow} from '@floating-ui/react-native';
function App() {
const arrowRef = useRef();
const {
refs,
floatingStyles,
middlewareData: {arrow: {x: arrowX, y: arrowY} = {}},
} = useFloating({
middleware: [arrow({element: arrowRef})],
});
// Pass the `arrowRef` to the element
}