diff --git a/screens/FavoriteScreen.tsx b/screens/FavoriteScreen.tsx index 05b287c..1f988f5 100644 --- a/screens/FavoriteScreen.tsx +++ b/screens/FavoriteScreen.tsx @@ -18,6 +18,8 @@ export default function FavoriteScreen({navigation}: RootTabScreenProps<'Favorit const [filteredDataSource, setFilteredDataSource] = useState([]); + const [borderwidth, setBorderWidth] = useState(0); + const [masterDataSource] = useState([]); const insets = useSafeAreaInsets(); @@ -48,15 +50,19 @@ export default function FavoriteScreen({navigation}: RootTabScreenProps<'Favorit searchSection: { height: 40, width: 400, - backgroundColor: "grey", + backgroundColor: "#323232", borderRadius: 20, marginVertical: 10, - alignSelf: "center" + alignSelf: "center", + borderWidth: borderwidth, + borderColor: "rgba(255,255,255,0.22)" + }, searchBar: { width: '100%', height: 40, - marginHorizontal: 20 + marginHorizontal: 20, + color: "white" }, titlePage: { height: 50, @@ -111,6 +117,14 @@ export default function FavoriteScreen({navigation}: RootTabScreenProps<'Favorit } }; + const ToggleSearchBar = () => { + if (borderwidth === 0) + setBorderWidth(2) + else + setBorderWidth(0) + + }; + return ( @@ -124,6 +138,10 @@ export default function FavoriteScreen({navigation}: RootTabScreenProps<'Favorit searchFilterFunction(text)} value={search} + placeholder="Rechercher ici..." + placeholderTextColor={"white"} + onFocus={ToggleSearchBar} + onBlur={ToggleSearchBar} > ([]); const [masterDataSource] = useState([]); @@ -66,15 +68,18 @@ export default function WatchLaterScreen({navigation}: RootTabScreenProps<'Watch searchSection: { height: 40, width: 400, - backgroundColor: "grey", + backgroundColor: "#323232", borderRadius: 20, marginVertical: 10, - alignSelf: "center" + alignSelf: "center", + borderWidth: borderwidth, + borderColor: "rgba(255,255,255,0.22)" }, searchBar: { width: '100%', height: 40, - marginHorizontal: 20 + marginHorizontal: 20, + color: "white" }, titlePage: { height: 50, @@ -108,6 +113,14 @@ export default function WatchLaterScreen({navigation}: RootTabScreenProps<'Watch loadWatchLater(); }, [dispatch]); + const ToggleSearchBar = () => { + if (borderwidth === 0) + setBorderWidth(2) + else + setBorderWidth(0) + + }; + return ( @@ -122,6 +135,10 @@ export default function WatchLaterScreen({navigation}: RootTabScreenProps<'Watch searchFilterFunction(text)} value={search} + placeholder="Rechercher ici..." + placeholderTextColor={"white"} + onFocus={ToggleSearchBar} + onBlur={ToggleSearchBar} >