## SearchBar
# `light`
# `Dark`
```js
import {
View,
TextInput,
TouchableOpacity,
Text,
useColorScheme
} from 'react-native';
import React, { useEffect, useRef, useState } from 'react';
import Animated, { useSharedValue, withTiming, useAnimatedStyle } from 'react-native-reanimated';
import { useNavigation } from '@react-navigation/native';
const Search = () => {
const navigation = useNavigation();
const [isExpanded, setIsExpanded] = useState(false);
const colorScheme = useColorScheme();
const isDarkMode = colorScheme === 'dark';
const animation = useSharedValue(0);
const inputRef = useRef(null);
const animatedStyle = useAnimatedStyle(() => ({
width: animation.value === 1
? withTiming(340, { duration: 500 })
: withTiming(50, { duration: 500 }),
}));
const toggleSearchBar = () => {
if (isExpanded) {
animation.value = 0;
setIsExpanded(false);
} else {
animation.value = 1;
setIsExpanded(true);
}
};
useEffect(() => {
animation.value = 0;
setIsExpanded(false);
}, []);
// Theme-based styles
const backgroundColor = isDarkMode ? '#333' : '#E7E7E7';
const textColor = isDarkMode ? '#fff' : '#000';
return (
);
};
export default Search;
```
# `Dark`
```js
import {
View,
TextInput,
TouchableOpacity,
Text,
useColorScheme
} from 'react-native';
import React, { useEffect, useRef, useState } from 'react';
import Animated, { useSharedValue, withTiming, useAnimatedStyle } from 'react-native-reanimated';
import { useNavigation } from '@react-navigation/native';
const Search = () => {
const navigation = useNavigation();
const [isExpanded, setIsExpanded] = useState(false);
const colorScheme = useColorScheme();
const isDarkMode = colorScheme === 'dark';
const animation = useSharedValue(0);
const inputRef = useRef(null);
const animatedStyle = useAnimatedStyle(() => ({
width: animation.value === 1
? withTiming(340, { duration: 500 })
: withTiming(50, { duration: 500 }),
}));
const toggleSearchBar = () => {
if (isExpanded) {
animation.value = 0;
setIsExpanded(false);
} else {
animation.value = 1;
setIsExpanded(true);
}
};
useEffect(() => {
animation.value = 0;
setIsExpanded(false);
}, []);
// Theme-based styles
const backgroundColor = isDarkMode ? '#333' : '#E7E7E7';
const textColor = isDarkMode ? '#fff' : '#000';
return (
);
};
export default Search;
```