How to use the react-native-pose function in react-native-pose
To help you get started, we’ve selected a few react-native-pose examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
karanpratapsingh / Proximity / app / layout / headers / AnimatedSearchBar.tsx View on Github 
import { AppContext } from '../../context';
import { Typography } from '../../theme';
import { ThemeColors } from '../../types/theme';
const { FontWeights, FontSizes } = Typography;
interface AnimatedSearchBarProps {
value: string,
onChangeText: (text: string) => void,
onFocus?: any,
onBlur?: any,
placeholder: string,
style?: StyleProp
};
const TransitionInput = posed(TextInput)({
focused: { width: '75%' },
notFocused: { width: '90%' }
});
const TransitionTouchableOpacity = posed(TouchableOpacity)({
focused: { width: 70 },
notFocused: { width: 0 }
});
const AnimatedSearchBar: React.FC = ({ value, onChangeText, onFocus, onBlur, placeholder, style }) => {
const { theme } = useContext(AppContext);
const [focused, setFocused] = useState(false);
const onOpen = () => {
setFocused(true);interface AnimatedSearchBarProps {
value: string,
onChangeText: (text: string) => void,
onFocus?: any,
onBlur?: any,
placeholder: string,
style?: StyleProp
};
const TransitionInput = posed(TextInput)({
focused: { width: '75%' },
notFocused: { width: '90%' }
});
const TransitionTouchableOpacity = posed(TouchableOpacity)({
focused: { width: 70 },
notFocused: { width: 0 }
});
const AnimatedSearchBar: React.FC = ({ value, onChangeText, onFocus, onBlur, placeholder, style }) => {
const { theme } = useContext(AppContext);
const [focused, setFocused] = useState(false);
const onOpen = () => {
setFocused(true);
onFocus();
};
const onCancel = () => {
setFocused(false);react-native-pose
Pose animation system for React Native
