react-native#TouchableNativeFeedback JavaScript Examples
The following examples show how to use
react-native#TouchableNativeFeedback.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: MoviesRow.js From MoviesDaily with MIT License | 6 votes |
|
MoviesRow = ({ data, title, navigation, type }) => {
return (
<View>
<View style={{ flexDirection: "row", justifyContent: "space-between" }}>
<Text style={Styles.text}>{title}</Text>
<TouchableNativeFeedback onPress={() => navigation.navigate("Movielist", { data, type, title })}>
<Text style={Styles.textMore}>More</Text>
</TouchableNativeFeedback>
</View>
<FlatList
data={data}
horizontal
renderItem={({ item }) => <MoviePoster item={item} navigation={navigation} type={type} />}
keyExtractor={(item) => item.id.toString()}
style={{ margin: 8, marginTop: 4 }}
showsHorizontalScrollIndicator={false}
/>
</View>
);
}
Example #2
| Source File: Touchable.js From rn-snackbar-component with MIT License | 6 votes |
|
Touchable = ({ onPress, style, children }) => {
if (IS_ANDROID && !IS_LT_LOLLIPOP) {
return (
<TouchableNativeFeedback
background={TouchableNativeFeedback.SelectableBackgroundBorderless()}
onPress={onPress}
>
<View style={style}>
{children}
</View>
</TouchableNativeFeedback>
)
}
return (
<TouchableOpacity onPress={onPress} style={style}>
{children}
</TouchableOpacity>
)
}
Example #3
| Source File: MenuItem.js From react-native-beauty-webview with MIT License | 6 votes |
|
function MenuItem({
children,
disabled,
disabledTextColor,
ellipsizeMode,
onPress,
style,
textStyle,
...props
}) {
const touchableProps =
Platform.OS === 'android'
? { background: TouchableNativeFeedback.SelectableBackground() }
: {};
return (
<Touchable
disabled={disabled}
onPress={onPress}
{...touchableProps}
{...props}
>
<View style={[styles.container, style]}>
<Text
ellipsizeMode={ellipsizeMode}
numberOfLines={1}
style={[
styles.title,
disabled && { color: disabledTextColor },
textStyle,
]}
>
{children}
</Text>
</View>
</Touchable>
);
}
Example #4
| Source File: helpers.js From React-Messenger-App with MIT License | 6 votes |
|
/**
* Create touchable component based on passed parameter and platform.
* It also returns default props for specific touchable types.
*/
export function makeTouchable(TouchableComponent) {
const Touchable = TouchableComponent || Platform.select({
android: TouchableNativeFeedback,
ios: TouchableHighlight,
default: TouchableHighlight,
});
let defaultTouchableProps = {};
if (Touchable === TouchableHighlight) {
defaultTouchableProps = { underlayColor: 'rgba(0, 0, 0, 0.1)' };
}
return { Touchable, defaultTouchableProps };
}
Example #5
| Source File: NewsItem.js From Turbo-Browser with MIT License | 5 votes |
|
export default function NewsItem(props) {
const [timeString, setTimeString] = useState("");
var updatedTime = +props.item.updated_date.substring(8, 10);
var updatedTime2 = +props.item.updated_date.substring(5, 7);
function getTimeString(){
let today = new Date();
let yesterday = new Date(today);
yesterday.setDate(yesterday.getDate() - 1);
let date = today.getDate();
let monthArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
let time = (updatedTime == date) ? "Updated today" :
(yesterday == updatedTime) ? "Updated yesterday" :
`Updated on ${updatedTime} ${monthArray[updatedTime2 - 1]}`;
setTimeString(time);
}
useEffect(() => {
getTimeString();
});
return (
<View style={styles.view_5_A_1}>
<View style={styles.view_5_A__1AA}>
<TouchableNativeFeedback
onPress={() => props.openNew(props.item.url)}
background={TouchableNativeFeedback.Ripple("#F0EFEFFE", false)}
>
<View style={styles.view_5_AA}>
<View style={styles.view_5_A_2}>
<Image
source={{uri: props.item.multimedia[2].url}}
style={styles.view_5_A_2_A}
/>
</View>
<View style={styles.view_5_A_3}>
<Text style={styles.view_5_A_3_A}>
<View>
<Text style={styles.view_heTxt_2BB}>
<Text style={styles.view_heTxt_2CC}>
{timeString}
</Text>
</Text>
</View>
</Text>
<Text style={styles.view_5_A_3_B}>
{props.item.title}
</Text>
</View>
</View>
</TouchableNativeFeedback>
</View>
</View>
)
}
Example #6
| Source File: DoctorDetailScreen.js From gDoctor with MIT License | 5 votes |
|
render () {
return (
<SafeAreaView style={apply(["flex", "bg-white"])}>
<StatusBar translucent={true} backgroundColor="transparent" barStyle="dark-content" />
<ScrollView style={apply("flex")} contentContainerStyle={apply("pb-7")}>
<ImageBackground source={Images.detailDoctor} style={styles.imgHeader}>
<View style={styles.imgHeaderRow}>
<TouchableOpacity activeOpacity={1} onPress={() => this.props.navigation.goBack()}>
<IconBack width={30} height={30} />
</TouchableOpacity>
<TouchableOpacity activeOpacity={1}>
<IconBookmark width={30} height={30} />
</TouchableOpacity>
</View>
</ImageBackground>
<View style={styles.content}>
<Text style={styles.name}>dr. Gilang Segara Bening</Text>
<View style={styles.infoWrapper}>
<Text style={styles.info}>Heart</Text>
<View style={styles.infoDot} />
<Text style={styles.info}>Persahabatan Hospital</Text>
</View>
<Text style={styles.contentText}>dr. Gilang is one of the best doctors in the Persahabatan Hospital. He has saved more than 1000 patients in the past 3 years. He has also received many awards from domestic and abroad as the best doctors. He is available on a private or schedule.</Text>
<View style={styles.spec}>
<View style={styles.specCol}>
<Text style={styles.specTitle}>Experience</Text>
<Text style={styles.specContent}>3 <Text style={styles.specHelper}>yr</Text></Text>
</View>
<View style={styles.specCol}>
<Text style={styles.specTitle}>Patient</Text>
<Text style={styles.specContent}>1221 <Text style={styles.specHelper}>ps</Text></Text>
</View>
<View style={[styles.specCol, apply("border-r-0")]}>
<Text style={styles.specTitle}>Rating</Text>
<Text style={styles.specContent}>5.0</Text>
</View>
</View>
</View>
</ScrollView>
<View style={styles.footer}>
<TouchableNativeFeedback
onPress={() => alert("hello!")}
background={TouchableNativeFeedback.Ripple("rgba(255,255,255, 0.25)")}>
<View style={styles.btnChat}>
<IconChat />
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback
onPress={() => alert("hello!")}
background={TouchableNativeFeedback.Ripple("rgba(255,255,255, 0.25)")}>
<View style={styles.btnAppointment}>
<Text style={styles.btnFooterLabel}>Make an Appointment</Text>
</View>
</TouchableNativeFeedback>
</View>
</SafeAreaView>
)
}
Example #7
| Source File: MenuItem.js From react-native-beauty-webview with MIT License | 5 votes |
|
Touchable = Platform.select({
android: TouchableNativeFeedback,
default: TouchableHighlight,
})
Example #8
| Source File: LangSelect.js From duofolio with GNU General Public License v3.0 | 5 votes |
|
function LangSelect(props) {
const [sLang, setSLang] = useState('');
const [tLang, setTLang] = useState('');
function onSave() {
if (sLang && tLang) {
if (sLang === tLang) {
showToast('Source and target languages cannot be same');
} else props.updateSettings({ sLang, tLang });
} else showToast('Please choose source & target languages');
}
return (
<View style={styles.wrapper}>
<Text style={styles.label}>Choose source language</Text>
<View style={styles.pickerWrapper}>
<Picker
prompt="Choose source language"
selectedValue={sLang}
onValueChange={setSLang}
style={{ flex: 1 }}>
{languages.map((lang, i) => (
<Picker.Item label={lang.label} value={lang.value} key={i} />
))}
</Picker>
</View>
<Text style={styles.label}>Choose target language</Text>
<View style={styles.pickerWrapper}>
<Picker
prompt="Choose target language"
selectedValue={tLang}
onValueChange={setTLang}
style={{ flex: 1 }}>
{languages.map((lang, i) => (
<Picker.Item label={lang.label} value={lang.value} key={i} />
))}
</Picker>
</View>
<TouchableNativeFeedback onPress={onSave}>
<View style={styles.buttonWrapper}>
<Text style={styles.buttonText}>Save</Text>
</View>
</TouchableNativeFeedback>
<View style={styles.textWrapper}>
<Text style={styles.notice}>Select your source and target languages</Text>
<Text style={styles.subtitle}>(These can be changed later)</Text>
</View>
</View>
);
}
Example #9
| Source File: NewsItemDark.js From Turbo-Browser with MIT License | 5 votes |
|
export default function NewsItem(props) {
const [timeString, setTimeString] = useState("");
var updatedTime = +props.item.updated_date.substring(8, 10);
var updatedTime2 = +props.item.updated_date.substring(5, 7);
function getTimeString(){
let today = new Date();
let yesterday = new Date(today);
yesterday.setDate(yesterday.getDate() - 1);
let date = today.getDate();
let monthArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
let time = (updatedTime == date) ? "Updated today" :
(yesterday == updatedTime) ? "Updated yesterday" :
`Updated on ${updatedTime} ${monthArray[updatedTime2 - 1]}`;
setTimeString(time);
}
useEffect(() => {
getTimeString();
});
return (
<View style={styles.view_5_A_1}>
<View style={styles.view_5_A__1AA}>
<TouchableNativeFeedback
onPress={() => props.openNew(props.item.url)}
background={TouchableNativeFeedback.Ripple("#6F7C8143", false)}
>
<View style={styles.view_5_AA}>
<View style={styles.view_5_A_2}>
<Image
source={{uri: props.item.multimedia[2].url}}
style={styles.view_5_A_2_A}
/>
</View>
<View style={styles.view_5_A_3}>
<Text style={styles.view_5_A_3_A}>
<View>
<Text style={styles.view_heTxt_2BB}>
<Text style={styles.view_heTxt_2CC}>
{timeString}
</Text>
</Text>
</View>
</Text>
<Text style={styles.view_5_A_3_B}>
{props.item.title}
</Text>
</View>
</View>
</TouchableNativeFeedback>
</View>
</View>
)
}
Example #10
| Source File: Settings.js From Turbo-Browser with MIT License | 4 votes |
|
Settings = ({ navigation, route }) => {
const styleTypes = ['default','dark-content', 'light-content'];
const [styleStatusBar, setStyleStatusBar] = useState(styleTypes[1]);
const [rippleOverflow, setRippleOverflow] = useState(false);
const [searchEngineAlert, setSearchEngineAlert] = useState(false);
const [selectedSelection, setSelectedSelection] = useState("Google");
const [defaultBrowserNum, setDefaultBrowserNum] = useState(1);
const appInfo = useSelector((state) => state.appInfo);
const dispatch = useDispatch();
const [isAnimationEnabled, setIsAnimationEnabled] = useState(true);
const [isAnimationDirEnabled, setIsAnimationDirEnabled] = useState(true);
const [isCookiesDisabled, setIsCookiesDisabled] = useState(false);
const [isJSDisabled, setIsJSDisabled] = useState(false);
useEffect(() => {
setSelectedSelection(appInfo.searchEngine);
setIsAnimationEnabled(appInfo.animations);
setIsAnimationDirEnabled(appInfo.animationDirection);
setIsCookiesDisabled(appInfo.disableCookies);
setIsJSDisabled(appInfo.disableJS);
if(appInfo.searchEngine == "Google") {
setDefaultBrowserNum(1);
} else if(appInfo.searchEngine == "DuckDuckGo") {
setDefaultBrowserNum(2);
} else if(appInfo.searchEngine == "Bing") {
setDefaultBrowserNum(3);
}
else if(appInfo.searchEngine == "Yahoo!"){
setDefaultBrowserNum(4);
} else {
setDefaultBrowserNum(1);
}
}, [appInfo]);
const data = [
{
label: "Google"
},
{
label: "DuckDuckGo"
},
{
label: "Bing"
},
{
label: "Yahoo!"
}
];
const onShare = async () => {
try {
const result = await Share.share({
message:
"Try Turbo Browser. I've been using it and it's really amazing.\n\nGet it here - https://play.google.com/store/apps/details?id=com.turbo_infinitus",
});
} catch (error) {
// error
}
}
const clearAll = async () => {
try {
await AsyncStorage.clear();
dispatch({type: "CHANGE_APPINFO", value: {
searchEngine: "Google",
animations: true,
animationDirection: true,
disableCookies: false,
disableJS: false
}});
setDefaultBrowserNum(1);
setSelectedSelection("Google");
setIsAnimationEnabled(true);
setIsAnimationDirEnabled(true);
setIsCookiesDisabled(false);
setIsJSDisabled(false);
} catch(error) {
// error
}
}
const closeSearchEngine = () => {
setSearchEngineAlert(false);
}
const saveSearchEngine = async () => {
try {
await AsyncStorage.setItem("appInfo", JSON.stringify({...appInfo, searchEngine: selectedSelection}));
dispatch({type: "CHANGE_APPINFO", value: {...appInfo, searchEngine: selectedSelection}});
setSelectedSelection(selectedSelection);
closeSearchEngine();
} catch (error) {
// error
}
}
return (
<SafeAreaView>
<StatusBar backgroundColor="#ffffff" barStyle={styleStatusBar}/>
<Modal
isOpen={searchEngineAlert}
onClosed={saveSearchEngine}
style={[styles.modal, styles.modal4]}
position={"center"}
backdropPressToClose={true}
swipeToClose={false}
backdropOpacity={0.2}
backButtonClose={true}
coverScreen={true}
animationDuration={200}
>
<View style={styles.modal4__1A}>
<View style={{
display: "flex",
flexDirection: "row",
marginTop: 20,
marginBottom: 5,
}}>
<Text style={{
fontSize: 16,
color: "#6C7377FE",
fontFamily: "Helvetica",
marginLeft: 20,
marginTop: 4,
marginRight: 10,
paddingBottom: 4,
flexGrow: 1,
}}>
Search Engine
</Text>
<TouchableOpacity onPress={closeSearchEngine}>
<View>
<IonicIcon name="chevron-down" style={{
fontSize: 20,
color: "#6C7377FE",
marginRight: 20,
marginTop: 4,
}}/>
</View>
</TouchableOpacity>
</View>
<View>
<View style={{
marginLeft: 10,
marginBottom: 30,
}}>
<RadioButtonRN
data={data}
box={false}
initial={defaultBrowserNum}
selectedBtn={(e) => {setSelectedSelection(e.label)}}
animationTypes={[]}
textColor="#6C7377FE"
circleSize={14}
duration={200}
textStyle={{
fontFamily: "Helvetica",
marginTop: 2,
marginBottom: 2,
fontSize: 15,
}}
icon={
<IonicIcon name="checkmark-circle-outline" style={{
fontSize: 22,
color: "#6C7377FE",
}}/>
}
/>
</View>
</View>
</View>
</Modal>
<View style={styles.history_title_1}>
<TouchableOpacity onPress={() => {navigation.goBack()}}>
<View style={styles.history1_AA}>
<IonicIcon name="arrow-back" style={styles.history_title_1A_icon}/>
</View>
</TouchableOpacity>
<View style={styles.history1_BB}>
<Text style={styles.history_title_1B_txt}>Settings</Text>
</View>
</View>
{/* <LinearGradient colors={['#EDEEEEFE', '#FFFFFFFF']} style={styles.linearGradient_1}></LinearGradient> */}
<ScrollView style={styles.settingsMainContainer} showsVerticalScrollIndicator={false} keyboardShouldPersistTaps={'handled'} scrollEventThrottle={1}>
<View>
<Text style={styles.section_1_txt}>BASICS</Text>
</View>
<View style={styles.section_1_CONT_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
onPress={() => {setSearchEngineAlert(true)}}
>
<View>
<Text style={styles.section_1_txt_A}>
Search Engine
</Text>
<Text style={styles.section_1_txt_B}>
{selectedSelection}
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFF", rippleOverflow)}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Enable Animations
</Text>
<Switch
trackColor={{ false: "#EAE7E7FE", true: "#9DFEBEFE" }}
thumbColor={isAnimationEnabled ? "#3AE07AFE" : "#CCCED0FE"}
value={isAnimationEnabled}
onValueChange={async () => {
try {
await AsyncStorage.setItem("appInfo", JSON.stringify({...appInfo, animations: !isAnimationEnabled}));
dispatch({type: "CHANGE_APPINFO", value: {...appInfo, animations: !isAnimationEnabled}});
setIsAnimationEnabled(!isAnimationEnabled);
} catch(error) {
// error
}
}}
/>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFF", rippleOverflow)}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Toggle Animation Direction
</Text>
<Switch
trackColor={{ false: "#EAE7E7FE", true: "#9DFEBEFE" }}
thumbColor={isAnimationDirEnabled ? "#3AE07AFE" : "#CCCED0FE"}
value={isAnimationDirEnabled}
onValueChange={async () => {
try {
await AsyncStorage.setItem("appInfo", JSON.stringify({...appInfo, animationDirection: !isAnimationDirEnabled}));
dispatch({type: "CHANGE_APPINFO", value: {...appInfo, animationDirection: !isAnimationDirEnabled}});
setIsAnimationDirEnabled(!isAnimationDirEnabled);
} catch(error) {
// error
}
}}
/>
</View>
</TouchableNativeFeedback>
</View>
<View style={{
minHeight: 1,
backgroundColor: "#EDEEEEFE",
marginTop: 10,
marginBottom: 10,
}}></View>
<View>
<Text style={styles.section_1_txt}>ADVANCED</Text>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
onPress={() => {
// -- x
CookieManager.clearAll()
.then((res) => {
Snackbar.show({
text: "Cookies cleared successfully",
duration: Snackbar.LENGTH_SHORT,
backgroundColor: "#282C34FF",
});
});
}}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Clear Cookies
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
onPress={ () =>
{
// ;-;
Snackbar.show({
text: "Cache cleared successfully",
duration: Snackbar.LENGTH_SHORT,
backgroundColor: "#282C34FF",
});
}
}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Clear Cache
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
onPress={() => {
clearAll();
Snackbar.show({
text: "App Data was cleared successfully",
duration: Snackbar.LENGTH_SHORT,
backgroundColor: "#282C34FF",
});
}}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Clear App Data
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFF", rippleOverflow)}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Disable Cookies
</Text>
<Switch
trackColor={{ false: "#EAE7E7FE", true: "#9DFEBEFE" }}
thumbColor={isCookiesDisabled ? "#3AE07AFE" : "#CCCED0FE"}
value={isCookiesDisabled}
onValueChange={async () => {
try {
await AsyncStorage.setItem("appInfo", JSON.stringify({...appInfo, disableCookies: !isCookiesDisabled}));
dispatch({type: "CHANGE_APPINFO", value: {...appInfo, disableCookies: !isCookiesDisabled}});
setIsCookiesDisabled(!isCookiesDisabled);
} catch(error) {
// error
}
}}
/>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFF", rippleOverflow)}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Disable Javascript
</Text>
<Switch
trackColor={{ false: "#EAE7E7FE", true: "#9DFEBEFE" }}
thumbColor={isJSDisabled ? "#3AE07AFE" : "#CCCED0FE"}
value={isJSDisabled}
onValueChange={async () => {
try {
await AsyncStorage.setItem("appInfo", JSON.stringify({...appInfo, disableJS: !isJSDisabled}));
dispatch({type: "CHANGE_APPINFO", value: {...appInfo, disableJS: !isJSDisabled}});
setIsJSDisabled(!isJSDisabled);
} catch(error) {
// error
}
}}
/>
</View>
</TouchableNativeFeedback>
</View>
<View style={{
minHeight: 1,
backgroundColor: "#EDEEEEFE",
marginTop: 10,
marginBottom: 10,
}}></View>
<View>
<Text style={styles.section_1_txt}>APP</Text>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
onPress={() => {
navigation.navigate('Search', { name: "turbo/https://turbo-browser-policy.netlify.app/" });
}}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Privacy Policy
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
onPress={() => {
navigation.navigate('Search', { name: "turbo/https://turbo-browser.netlify.app/" });
}}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Visit Website
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
onPress={() => {
navigation.navigate('Help', { name: "Home" });
}}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
FAQs
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
onPress={onShare}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Share App
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
onPress={() => {
Linking.openURL("https://play.google.com/store/apps/details?id=com.turbo_infinitus");
}}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Rate App
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={{
minHeight: 1,
backgroundColor: "#EDEEEEFE",
marginTop: 10,
marginBottom: 10,
}}></View>
<View>
<Text style={styles.section_1_txt}>ABOUT</Text>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Version
</Text>
<Text style={styles.section_1_txt_A_TF2_BOLD}>
5.4.3
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Version code
</Text>
<Text style={styles.section_1_txt_A_TF2_BOLD}>
54
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={{
minHeight: 80,
}}></View>
</ScrollView>
</SafeAreaView>
);
}
Example #11
| Source File: Search.js From Turbo-Browser with MIT License | 4 votes |
|
Search = ({ navigation, route }) => {
const styleTypes = ['default','dark-content', 'light-content'];
const [styleStatusBar, setStyleStatusBar] = useState(styleTypes[1]);
const [rippleOverflow, setRippleOverflow] = useState(false);
const [canGoBack, setCanGoBack] = useState(false);
const [canGoForward, setCanGoForward] = useState(false);
const [currentUrl, setCurrentUrl] = useState("");
const [WebL, setWebL] = useState(true);
const [cUrl, setCUrl] = useState((route.params.name).replace("turbo/", ""));
const [httpS, setHttpS] = useState(2);
const [favIcon, setFavIcon] = useState("");
const [webTS, setWebTS] = useState((route.params.name).replace("turbo/", "").split("/")[2] > 26 ? cUrl.split("/")[2].substring(0, 24) + "..." : cUrl.split("/")[2]);
const [titleCurrent, setTitleCurrent] = useState("");
const [webViewShow, setWebViewShow] = useState(false);
const [fullscreen, setFullscreen] = useState(false);
const [f2, setF2] = useState(false);
const BottomNavOpacity = useRef(new Animated.Value(1)).current;
const [optionsAlertOpen, setOptionsAlertOpen] = useState(false);
const [copiedText, setCopiedText] = useState('');
const [searchAlertOpen, setSearchAlertOpen] = useState(false);
const INJECTEDJAVASCRIPT = `
const meta = document.createElement('meta'); meta.setAttribute('content', 'initial-scale=1.0, maximum-scale=1.0'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta);
var links = document.links, i, length;
for (i = 0, length = links.length; i < length; i++) {
links[i].target == '_blank' && links[i].removeAttribute('target');
}
window.ReactNativeWebView.postMessage(document.title);
`;
const inputRef = React.useRef();
const webviewRef = useRef(null);
const [searchOpen, setSearchOpen] = useState(false);
const [searchValue, setSearchValue] = useState("");
const [bookmarksKeyValue, setBookmarksKeyValue] = useState("");
const appInfo = useSelector((state) => state.appInfo);
useEffect(() => {
Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
Keyboard.addListener("keyboardDidHide", _keyboardDidHide);
// cleanup function
return () => {
Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);
};
}, []);
const speechToTextHandler = async () => {
let speechToTextData = null;
try {
speechToTextData = await SpeechToText.startSpeech('Try saying something', 'en_IN');
searchStringS(speechToTextData);
} catch (error) {
// error
}
}
const _keyboardDidShow = () => {
if(route.name == "Search"){
setF2(true);
} else {
// Do nothing
}
};
const _keyboardDidHide = () => {
if(route.name == "Search"){
setF2(false);
} else {
// Do nothing
}
};
const showToast = () => {
ToastAndroid.show("URL copied", ToastAndroid.SHORT);
};
useEffect(() => {
setTimeout(() => {
setWebViewShow(true);
}, 600);
}, []);
const se1 = () => {
if (webviewRef.current){
if(canGoBack) {
webviewRef.current.goBack();
} else {
navigation.goBack();
}
}
}
const se2 = () => {
if (webviewRef.current) webviewRef.current.goForward();
}
const se3 = () => {
navigation.navigate('Home', { name: "Home" });
}
const setHttpIcon = () => {
if(cUrl.substring(0, 5) == "https") {
setHttpS(1);
} else if (cUrl.substring(0, 5) == "http:") {
setHttpS(2);
} else {
setHttpS(3);
}
}
const getBookmarkValue = async () => {
try {
const value = await AsyncStorage.getItem("bookmarksKey")
if(value !== null) {
// value previously stored
setBookmarksKeyValue(value);
} else {
setBookmarksKeyValue("");
}
} catch(e) {
// error
}
}
const saveBookmarkValue = async () => {
try {
const value = await AsyncStorage.getItem("bookmarksKey")
if(value !== null) {
// value previously stored
await AsyncStorage.setItem("bookmarksKey", value + "~" + currentUrl);
setBookmarksKeyValue(value + "~" + currentUrl);
} else {
await AsyncStorage.setItem("bookmarksKey", currentUrl + "~");
setBookmarksKeyValue(currentUrl + "~");
}
} catch(e) {
// error
}
}
useEffect(() => {
navigation.addListener('focus',
() => {
let urlToOpen = (route.params.name).replace("turbo/", "");
setCurrentUrl(urlToOpen);
setWebTS(urlToOpen.split("/")[2] > 26 ? cUrl.split("/")[2].substring(0, 24) + "..." : cUrl.split("/")[2]);
setHttpS(2);
setF2(false);
getBookmarkValue();
}
);
}, []);
const refreshWeb = () => {
if (webviewRef.current) webviewRef.current.reload();
}
const onMessage = async (message) => {
setTitleCurrent(message.nativeEvent.data);
if(message.nativeEvent.data !== ""){
let objectToSet = {
name: message.nativeEvent.data,
url: message.nativeEvent.url
}
let valueToSet = JSON.stringify(objectToSet);
await AsyncStorage.setItem("lastSearchedWeb", valueToSet);
}
}
const handleFullScrTouch = () => {
if(fullscreen){
setFullscreen(false);
Animated.timing(
BottomNavOpacity,
{
toValue: 0,
duration: 0,
useNativeDriver: true,
}
).start();
setTimeout(() => {
Animated.timing(
BottomNavOpacity,
{
toValue: 1,
duration: appInfo.animations == false ? 0 : 200,
useNativeDriver: true,
}
).start();
}, 200);
} else {
setFullscreen(true);
Animated.timing(
BottomNavOpacity,
{
toValue: 0,
duration: appInfo.animations == false ? 0 : 100,
useNativeDriver: true,
}
).start();
}
}
const se4 = () => {
saveBookmarkValue();
}
const se5 = () => {
setOptionsAlertOpen(true);
}
const onShare = async () => {
try {
const result = await Share.share({
message: currentUrl,
});
if (result.action === Share.sharedAction) {
if (result.activityType) {
// shared with activity type of result.activityType
} else {
// shared
}
} else if (result.action === Share.dismissedAction) {
// dismissed
}
} catch (error) {
// error
}
};
const copyToClipboard = () => {
Clipboard.setString(currentUrl);
};
const onSearchChangeText = (text) => {
setSearchValue(text);
}
const saveHistory = async () => {
if(currentUrl !== "about:blank" || currentUrl !== "" || currentUrl.includes("~"))
try {
const value = await AsyncStorage.getItem("historyKey");
if(value !== null) {
// value previously stored
if(value.includes("~")){
await AsyncStorage.setItem("historyKey", currentUrl + "~" + value);
} else {
await AsyncStorage.setItem("historyKey", currentUrl + "~" + value);
}
} else {
await AsyncStorage.setItem("historyKey", currentUrl);
}
} catch (error) {
// error
}
}
const searchStringS = (string) => {
if(string == ""){
} else if (string.substring(0, 8) == "https://" || string.substring(0, 7) == "http://") {
setCurrentUrl(string);
} else {
// openWebsite("https://www.google.com/search?q=" + string.replace(/ /g,"+"));
if(appInfo.searchEngine == "Google"){
setCurrentUrl("https://www.google.com/search?q=" + string.replace(/ /g,"+"));
} else if (appInfo.searchEngine == "DuckDuckGo") {
openWebsite("https://duckduckgo.com/?q=" + string.replace(/ /g,"+"));
} else if (appInfo.searchEngine == "Bing") {
setCurrentUrl("https://www.bing.com/search?q=" + string.replace(/ /g,"+"));
} else if (appInfo.searchEngine == "Yahoo!") {
setCurrentUrl("https://in.search.yahoo.com/search?p=" + string.replace(/ /g,"+"));
} else {
setCurrentUrl("https://www.google.com/search?q=" + string.replace(/ /g,"+"));
}
}
}
const voiceSearchBtnClk = () => {
speechToTextHandler();
setSearchAlertOpen(false);
setSearchOpen(false);
}
const se4Remove = async () => {
try {
const value = await AsyncStorage.getItem("bookmarksKey");
const newValue = value.split(currentUrl).join("");
await AsyncStorage.setItem("bookmarksKey", newValue);
setBookmarksKeyValue(newValue);
} catch(e) {
// error
}
}
return (
<SafeAreaView>
<StatusBar backgroundColor="#ffffff" barStyle={styleStatusBar} />
<Modal
isOpen={searchAlertOpen}
onClosed={() => {
setSearchAlertOpen(false);
setSearchOpen(false);
}}
style={[styles.modal, styles.modal12]}
entry={"top"}
position={"top"}
backdropPressToClose={true}
swipeToClose={false}
backdropOpacity={0.4}
backButtonClose={true}
coverScreen={true}
animationDuration={200}
>
<View style={styles.view__2}>
<View style={{borderRadius: 40, overflow: 'hidden'}}>
{/* <TouchableOpacity
style={{width: "100%"}}
> */}
<View style={styles.view_input_c_1}>
<IonicIcon style={styles.search_icon} name="search"/>
<TextInput
ref={inputRef}
style={{
// maxWidth: 200,
fontSize: 14,
color: "#5B5D5DFF",
marginLeft: 8,
fontFamily: "Helvetica",
flexGrow: 1,
}}
value={searchValue}
onChangeText={(text) => onSearchChangeText(text)}
autoFocus={true}
editable={searchOpen}
onSubmitEditing={() => {
setSearchAlertOpen(false);
setSearchOpen(false);
searchStringS(searchValue);
}}
placeholderTextColor="#CECFCFFF"
placeholder="Search Google"
/>
{
searchValue.length > 0 ?
<IonicIcon onPress={() => setSearchValue("")} style={styles.mic_icon} name="close"/>
:
<IonicIcon onPress={voiceSearchBtnClk} style={styles.mic_icon} name="mic"/>
}
</View>
{/* </TouchableOpacity> */}
</View>
</View>
</Modal>
<Modal
isOpen={optionsAlertOpen}
onClosed={() => {setOptionsAlertOpen(false)}}
style={[styles.modal, styles.modal8]}
position={"bottom"}
backdropPressToClose={true}
swipeToClose={false}
backdropOpacity={0.2}
backButtonClose={true}
coverScreen={true}
animationDuration={200}
>
<View style={styles.optionAlertCont_MAIN}>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
copyToClipboard();
showToast();
}}>
<Text style={styles.optionAlertCont_optText_1}>
Copy URL
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
setTimeout(() => {
onShare();
}, 320);
}}>
<Text style={styles.optionAlertCont_optText_1}>
Share
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
setCurrentUrl("view-source:" + currentUrl);
}}>
<Text style={styles.optionAlertCont_optText_1}>
View page source
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
navigation.navigate('Bookmarks', { name: "Home" });
}}>
<Text style={styles.optionAlertCont_optText_1}>
Bookmarks
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
navigation.navigate('History', { name: "Home" });
}}>
<Text style={styles.optionAlertCont_optText_1}>
History
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
navigation.navigate('Settings', { name: "Home" });
}}>
<Text style={styles.optionAlertCont_optText_1}>
Settings
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
setCurrentUrl("https://turbo-browser.netlify.app/privacy-policy.html");
}}>
<Text style={styles.optionAlertCont_optText_1}>
Privacy Policy
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1_B}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
navigation.navigate('Help', { name: "Home" });
}}>
<Text style={styles.optionAlertCont_optText_1}>
FAQs
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_icon_1}>
<TouchableOpacity style={{
width: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
paddingBottom: 10,
marginBottom: 4,
}} onPress={() => {setOptionsAlertOpen(false)}}>
{/* <FontAwesome style={styles.optionAlertCont_opt_icon_2} name="chevron-down"/> */}
<Image
source={require("../assets/arrowDown2.png")}
style={{
height: 26,
width: 26,
}}
/>
</TouchableOpacity>
</View>
</View>
</Modal>
<View style={styles.searchMainContainer}>
{/* Search 1 */}
<View style={styles.search_1}>
{
currentUrl.includes("view-source:") ?
<View style={styles.sea1__1}>
<Image
style={styles.sea1__1A}
source={(favIcon.includes("https://api.statvoo.com/favicon/?url=https://www.nytimes.com/") ? require("../assets/ny.png") :
favIcon.includes("https://api.statvoo.com/favicon/?url=https://www.google.com/") ? require("../assets/googleIcon.png") :
{uri: favIcon})}
/>
</View>
:
<View style={styles.sea1__1}>
{WebL ?
<ActivityIndicator size="small" style={{
height: 16,
width: 16,
resizeMode: "cover",
marginLeft: 8,
marginRight: 8,
}} color={'#8F8D8DFE'} />
:
<Image
style={styles.sea1__1A}
source={(favIcon.includes("https://api.statvoo.com/favicon/?url=https://www.nytimes.com/") ? require("../assets/ny.png") :
favIcon.includes("https://api.statvoo.com/favicon/?url=https://www.google.com/") ? require("../assets/googleIcon.png") :
{uri: favIcon})}
/>
}
</View>
}
<View style={{
height: 30,
borderRadius: 30,
flexGrow: 1,
overflow: "hidden",
}}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AEAEAEFF", rippleOverflow)}
onPress={() => {
setSearchAlertOpen(true);
setSearchValue("");
setTimeout(() => {
setSearchOpen(true);
inputRef.current?.focus();
}, 400);
}}
>
<View style={styles.sea1__2}>
<View style={styles.sea1__2A}>
{
(httpS == 1) ?
<MaterialIcons style={styles.sea1__2A_icon1} name="https"/>
: (httpS == 2) ?
<MaterialIcons style={styles.sea1__2A_icon2} name="https"/>
: (httpS == 3) ?
<MaterialIcons style={styles.sea1__2A_icon2} name="https"/>
: <MaterialIcons style={styles.sea1__2A_icon2} name="https"/>
}
</View>
<View style={styles.sea1__2B}>
<Text style={styles.sea1__2B_txt}>
{currentUrl.replace("turbo/", "").split("/")[2] > 26 ? cUrl.split("/")[2].substring(0, 24) + "..." : cUrl.split("/")[2]}
</Text>
</View>
<TouchableOpacity onPress={refreshWeb}>
<View style={styles.sea1__2C}>
<MaterialIcons style={styles.sea1__2C_icon} name="replay"/>
</View>
</TouchableOpacity>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.sea1__3}>
<TouchableOpacity onPress={handleFullScrTouch}>
{/* <MaterialIcons style={styles.sea1__3_icon} name="more-vert"/> */}
{
fullscreen ?
<MaterialIcons style={styles.sea1__3_icon} name="fullscreen-exit"/>
:
<MaterialIcons style={styles.sea1__3_icon} name="fullscreen"/>
}
</TouchableOpacity>
</View>
</View>
{/* Search 2 */}
<View style={styles.search_2}>
{
webViewShow ?
<WebView
startInLoadingState={true}
ref={webviewRef}
source={{
uri: currentUrl,
}}
onNavigationStateChange={navState => {
setCanGoBack(navState.canGoBack);
setCanGoForward(navState.canGoForward);
setCUrl(navState.url);
// setWebTS(cUrl.split("/")[2] > 26 ? cUrl.split("/")[2].substring(0, 24) + "..." : cUrl.split("/")[2]);
}}
allowFileAccess={true}
geolocationEnabled={true}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
injectedJavaScript={INJECTEDJAVASCRIPT}
onLoadStart={() => {
setWebL(true);
}}
onLoadEnd={() => {
setFavIcon("https://api.statvoo.com/favicon/?url=" + cUrl);
setWebL(false);
setHttpIcon();
setWebTS(cUrl.split("/")[2] > 26 ? cUrl.split("/")[2].substring(0, 24) + "..." : cUrl.split("/")[2]);
saveHistory();
}}
userAgent="Mozilla/5.0 (Linux; Android 5.1.1; Nexus 5 Build/LMY48B; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/43.0.2357.65 Mobile Safari/537.36"
onMessage={onMessage}
javaScriptEnabled={appInfo.disableJS == true ? false : true}
domStorageEnabled={appInfo.disableCookies == true ? false : true}
/>
: <></>
}
</View>
{/* Search 3 */}
{
fullscreen || f2 ?
<></>
:
<Animated.View
style={{
opacity: BottomNavOpacity
}}
>
<View style={styles.search_3}>
<TouchableOpacity onPress={se1} style={styles.sea_3_item}>
<View>
<IonicIcon style={styles.sea3__3_icon} name="chevron-back-outline"/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={se2} style={styles.sea_3_item}>
<View>
<IonicIcon style={styles.sea3__3_icon} name="chevron-forward-outline"/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={se3} style={styles.sea_3_item}>
<View>
<IonicIcon style={styles.sea3__3_icon} name="home-outline"/>
</View>
</TouchableOpacity>
{
bookmarksKeyValue.includes(currentUrl) ?
<TouchableOpacity onPress={se4Remove} style={styles.sea_3_item}>
<View>
<IonicIcon style={styles.sea3__3_icon_r} name="heart"/>
</View>
</TouchableOpacity>
:
<TouchableOpacity onPress={se4} style={styles.sea_3_item}>
<View>
<IonicIcon style={styles.sea3__3_icon_r} name="heart-outline"/>
</View>
</TouchableOpacity>
}
{/* <TouchableOpacity onPress={se4} style={styles.sea_3_item}>
<View>
{
bookmarksKeyValue.includes(currentUrl) ?
<IonicIcon style={styles.sea3__3_icon_r} name="heart"/>
:
<IonicIcon style={styles.sea3__3_icon} name="heart-outline"/>
}
</View>
</TouchableOpacity> */}
<TouchableOpacity onPress={se5} style={styles.sea_3_item}>
{/* Future Tab Feature */}
{/* <View style={{justifyContent: "center", alignItems: "center"}}>
<View style={{
height: 17,
width: 17,
borderWidth: 1.6,
borderRadius: 4,
borderColor: "#767778FE",
alignItems: "center",
justifyContent: "center",
}}>
<Text style={{
color: "#767778FE",
fontSize: 10,
textAlign: "center",
fontWeight: "bold",
}}>
1
</Text>
</View>
</View> */}
<View>
<IonicIcon style={styles.sea3__3_icon} name="grid-outline"/>
</View>
</TouchableOpacity>
</View>
</Animated.View>
}
</View>
</SafeAreaView>
);
}
Example #12
| Source File: IncognitoSearch.js From Turbo-Browser with MIT License | 4 votes |
|
IncognitoSearch = ({ navigation, route }) => {
const styleTypes = ['default','dark-content', 'light-content'];
const [styleStatusBar, setStyleStatusBar] = useState(styleTypes[2]);
const [rippleOverflow, setRippleOverflow] = useState(false);
const [canGoBack, setCanGoBack] = useState(false);
const [canGoForward, setCanGoForward] = useState(false);
const [currentUrl, setCurrentUrl] = useState("");
const [WebL, setWebL] = useState(true);
const [cUrl, setCUrl] = useState((route.params.name).replace("turbo/", ""));
const [httpS, setHttpS] = useState(2);
const [favIcon, setFavIcon] = useState("");
const [webTS, setWebTS] = useState((route.params.name).replace("turbo/", "").split("/")[2] > 26 ? cUrl.split("/")[2].substring(0, 24) + "..." : cUrl.split("/")[2]);
const [webViewShow, setWebViewShow] = useState(false);
const [fullscreen, setFullscreen] = useState(false);
const [f2, setF2] = useState(false);
const BottomNavOpacity = useRef(new Animated.Value(1)).current;
const [optionsAlertOpen, setOptionsAlertOpen] = useState(false);
const [searchAlertOpen, setSearchAlertOpen] = useState(false);
const INJECTEDJAVASCRIPT = `
const meta = document.createElement('meta'); meta.setAttribute('content', 'initial-scale=1.0, maximum-scale=1.0'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta);
var links = document.links, i, length;
for (i = 0, length = links.length; i < length; i++) {
links[i].target == '_blank' && links[i].removeAttribute('target');
}
window.ReactNativeWebView.postMessage(document.title);
`;
const inputRef = React.useRef();
const webviewRef = useRef(null);
const [searchOpen, setSearchOpen] = useState(false);
const [searchValue, setSearchValue] = useState("");
const [bookmarksKeyValue, setBookmarksKeyValue] = useState("");
const appInfo = useSelector((state) => state.appInfo);
useEffect(() => {
Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
Keyboard.addListener("keyboardDidHide", _keyboardDidHide);
// cleanup function
return () => {
Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);
};
}, []);
const speechToTextHandler = async () => {
showToast4();
}
const _keyboardDidShow = () => {
if(route.name == "IncognitoSearch"){
setF2(true);
} else {
// Do nothing
}
};
const _keyboardDidHide = () => {
if(route.name == "IncognitoSearch"){
setF2(false);
} else {
// Do nothing
}
};
const showToast = () => {
ToastAndroid.show("URL copied", ToastAndroid.SHORT);
};
const showToast2 = () => {
ToastAndroid.show("You can't set bookmarks on Incognito mode", ToastAndroid.SHORT);
};
const showToast4 = () => {
ToastAndroid.show("You can't use Voice Search on Incognito mode", ToastAndroid.SHORT);
};
useEffect(() => {
setTimeout(() => {
setWebViewShow(true);
}, 100);
}, [])
const se1 = () => {
if (webviewRef.current){
if(canGoBack) {
webviewRef.current.goBack();
} else {
navigation.goBack();
}
}
}
const se2 = () => {
if (webviewRef.current) webviewRef.current.goForward();
}
const se3 = () => {
navigation.navigate('Home', { name: "Home" });
}
const setHttpIcon = () => {
if(cUrl.substring(0, 5) == "https") {
setHttpS(1);
} else if (cUrl.substring(0, 5) == "http:") {
setHttpS(2);
} else {
setHttpS(3);
}
}
useEffect(() => {
navigation.addListener('focus',
() => {
let urlToOpen = (route.params.name).replace("turbo/", "");
setCurrentUrl(urlToOpen);
setWebTS(urlToOpen.split("/")[2] > 26 ? cUrl.split("/")[2].substring(0, 24) + "..." : cUrl.split("/")[2]);
setHttpS(2);
setF2(false);
}
);
}, []);
const refreshWeb = () => {
if (webviewRef.current) webviewRef.current.reload();
}
const handleFullScrTouch = () => {
if(fullscreen){
setFullscreen(false);
Animated.timing(
BottomNavOpacity,
{
toValue: 0,
duration: 0,
useNativeDriver: true,
}
).start();
setTimeout(() => {
Animated.timing(
BottomNavOpacity,
{
toValue: 1,
duration: 200,
useNativeDriver: true,
}
).start();
}, 200);
} else {
setFullscreen(true);
Animated.timing(
BottomNavOpacity,
{
toValue: 0,
duration: 100,
useNativeDriver: true,
}
).start();
}
}
const se4 = () => {
showToast2();
}
const se5 = () => {
setOptionsAlertOpen(true);
}
const onShare = async () => {
try {
const result = await Share.share({
message: currentUrl,
});
if (result.action === Share.sharedAction) {
if (result.activityType) {
// shared with activity type of result.activityType
} else {
// shared
}
} else if (result.action === Share.dismissedAction) {
// dismissed
}
} catch (error) {
// error
}
};
const copyToClipboard = () => {
Clipboard.setString(currentUrl);
};
const onSearchChangeText = (text) => {
setSearchValue(text);
}
const searchStringS = (string) => {
if(string == ""){
} else if (string.substring(0, 8) == "https://" || string.substring(0, 7) == "http://") {
setCurrentUrl(string);
} else {
setCurrentUrl("https://duckduckgo.com/?q=" + string.replace(/ /g,"+"));
}
}
const voiceSearchBtnClk = () => {
speechToTextHandler();
setSearchAlertOpen(false);
setSearchOpen(false);
}
const se4Remove = async () => {
showToast2();
}
useEffect(() => {
navigation.addListener('focus',
() => {
changeNavigationBarColor("#1C2124", false, true);
}
);
navigation.addListener('blur',
() => {
changeNavigationBarColor("#FFFFFF", true, true);
}
);
}, []);
return (
<SafeAreaView>
<StatusBar backgroundColor="#1C2124FF" barStyle={styleStatusBar} />
<Modal
isOpen={searchAlertOpen}
onClosed={() => {
setSearchAlertOpen(false);
setSearchOpen(false);
}}
style={[styles.modal, styles.modal12]}
entry={"top"}
position={"top"}
backdropPressToClose={true}
swipeToClose={false}
backdropOpacity={0.6}
backButtonClose={true}
coverScreen={false}
animationDuration={200}
>
<View style={styles.view__2}>
<View style={{borderRadius: 40, overflow: 'hidden'}}>
{/* <TouchableOpacity
style={{width: "100%"}}
> */}
<View style={styles.view_input_c_1}>
<IonicIcon style={styles.search_icon} name="search"/>
<TextInput
ref={inputRef}
style={{
// maxWidth: 200,
fontSize: 14,
color: "#808D8FFE",
marginLeft: 8,
fontFamily: "Helvetica",
flexGrow: 1,
}}
value={searchValue}
onChangeText={(text) => onSearchChangeText(text)}
autoFocus={true}
editable={searchOpen}
onSubmitEditing={() => {
setSearchAlertOpen(false);
setSearchOpen(false);
searchStringS(searchValue);
}}
placeholderTextColor="#4A5558FE"
placeholder="Search DuckDuckGo"
/>
{
searchValue.length > 0 ?
<IonicIcon onPress={() => setSearchValue("")} style={styles.mic_icon} name="close"/>
:
<></>
}
</View>
{/* </TouchableOpacity> */}
</View>
</View>
</Modal>
<Modal
isOpen={optionsAlertOpen}
onClosed={() => {setOptionsAlertOpen(false)}}
style={[styles.modal, styles.modal8]}
position={"bottom"}
backdropPressToClose={true}
swipeToClose={false}
backdropOpacity={0.6}
backButtonClose={true}
coverScreen={false}
animationDuration={200}
>
<View style={styles.optionAlertCont_MAIN}>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
copyToClipboard();
showToast();
}}>
<Text style={styles.optionAlertCont_optText_1}>
Copy URL
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
setTimeout(() => {
onShare();
}, 320);
}}>
<Text style={styles.optionAlertCont_optText_1}>
Share
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
setCurrentUrl("view-source:" + currentUrl);
}}>
<Text style={styles.optionAlertCont_optText_1}>
View page source
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1_B}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
navigation.navigate('Home', { name: "Incognito" });
}}>
<Text style={styles.optionAlertCont_optText_1}>
Close Incognito
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_icon_1}>
<TouchableOpacity style={{
width: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
paddingBottom: 10,
marginBottom: 4,
}} onPress={() => {setOptionsAlertOpen(false)}}>
{/* <FontAwesome style={styles.optionAlertCont_opt_icon_2} name="chevron-down"/> */}
<Image
source={require("../assets/arrowDown2.png")}
style={{
height: 26,
width: 26,
}}
/>
</TouchableOpacity>
</View>
</View>
</Modal>
<View style={styles.searchMainContainer}>
{/* Search 1 */}
<View style={styles.search_1}>
{
currentUrl.includes("view-source:") ?
<View style={styles.sea1__1}>
<Image
style={styles.sea1__1A}
source={( favIcon.includes("https://api.statvoo.com/favicon/?url=https://www.google.com/") ? require("../assets/googleIcon.png") :
{uri: favIcon})}
/>
</View>
:
<View style={styles.sea1__1}>
{WebL ?
<ActivityIndicator size="small" style={{
height: 16,
width: 16,
resizeMode: "cover",
marginLeft: 8,
marginRight: 8,
}} color={'#4A5558FE'} />
:
<Image
style={styles.sea1__1A}
source={(favIcon.includes("https://api.statvoo.com/favicon/?url=https://www.nytimes.com/") ? require("../assets/ny.png") :
favIcon.includes("https://api.statvoo.com/favicon/?url=https://www.google.com/") ? require("../assets/googleIcon.png") :
{uri: favIcon})}
/>
}
</View>
}
<View style={{
height: 30,
borderRadius: 30,
flexGrow: 1,
overflow: "hidden",
}}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AEAEAEFF", rippleOverflow)}
onPress={() => {
setSearchAlertOpen(true);
setSearchValue("");
setTimeout(() => {
setSearchOpen(true);
inputRef.current?.focus();
}, 400);
}}
>
<View style={styles.sea1__2}>
<View style={styles.sea1__2A}>
{
(httpS == 1) ?
<MaterialIcons style={styles.sea1__2A_icon1} name="https"/>
: (httpS == 2) ?
<MaterialIcons style={styles.sea1__2A_icon2} name="https"/>
: (httpS == 3) ?
<MaterialIcons style={styles.sea1__2A_icon2} name="https"/>
: <MaterialIcons style={styles.sea1__2A_icon2} name="https"/>
}
</View>
<View style={styles.sea1__2B}>
<Text style={styles.sea1__2B_txt}>
{currentUrl.replace("turbo/", "").split("/")[2] > 26 ? cUrl.split("/")[2].substring(0, 24) + "..." : cUrl.split("/")[2]}
</Text>
</View>
<TouchableOpacity onPress={refreshWeb}>
<View style={styles.sea1__2C}>
<MaterialIcons style={styles.sea1__2C_icon} name="replay"/>
</View>
</TouchableOpacity>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.sea1__3}>
<TouchableOpacity onPress={handleFullScrTouch}>
{/* <MaterialIcons style={styles.sea1__3_icon} name="more-vert"/> */}
{
fullscreen ?
<MaterialIcons style={styles.sea1__3_icon} name="fullscreen-exit"/>
:
<MaterialIcons style={styles.sea1__3_icon} name="fullscreen"/>
}
</TouchableOpacity>
</View>
</View>
{/* Search 2 */}
<View style={styles.search_2}>
{
webViewShow ?
<WebView
startInLoadingState={true}
ref={webviewRef}
source={{
uri: currentUrl,
}}
onNavigationStateChange={navState => {
setCanGoBack(navState.canGoBack);
setCanGoForward(navState.canGoForward);
setCUrl(navState.url);
// setWebTS(cUrl.split("/")[2] > 26 ? cUrl.split("/")[2].substring(0, 24) + "..." : cUrl.split("/")[2]);
}}
allowFileAccess={true}
geolocationEnabled={true}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
injectedJavaScript={INJECTEDJAVASCRIPT}
onLoadStart={() => {
setWebL(true);
}}
onLoadEnd={() => {
setFavIcon("https://api.statvoo.com/favicon/?url=" + cUrl);
setWebL(false);
setHttpIcon();
setWebTS(cUrl.split("/")[2] > 26 ? cUrl.split("/")[2].substring(0, 24) + "..." : cUrl.split("/")[2]);
}}
userAgent="Mozilla/5.0 (Linux; Android 5.1.1; Nexus 5 Build/LMY48B; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/43.0.2357.65 Mobile Safari/537.36"
domStorageEnabled={false}
/>
: <></>
}
</View>
{/* Search 3 */}
{
fullscreen || f2 ?
<></>
:
<Animated.View
style={{
opacity: BottomNavOpacity
}}
>
<View style={styles.search_3}>
<TouchableOpacity onPress={se1} style={styles.sea_3_item}>
<View>
<IonicIcon style={styles.sea3__3_icon} name="chevron-back-outline"/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={se2} style={styles.sea_3_item}>
<View>
<IonicIcon style={styles.sea3__3_icon} name="chevron-forward-outline"/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={se3} style={styles.sea_3_item}>
<View>
<IonicIcon style={styles.sea3__3_icon} name="home-outline"/>
</View>
</TouchableOpacity>
{
bookmarksKeyValue.includes(currentUrl) ?
<TouchableOpacity onPress={se4Remove} style={styles.sea_3_item}>
<View>
<IonicIcon style={styles.sea3__3_icon_r} name="heart"/>
</View>
</TouchableOpacity>
:
<TouchableOpacity onPress={se4} style={styles.sea_3_item}>
<View>
<IonicIcon style={styles.sea3__3_icon_r} name="heart-outline"/>
</View>
</TouchableOpacity>
}
<TouchableOpacity onPress={se5} style={styles.sea_3_item}>
<View>
<IonicIcon style={styles.sea3__3_icon} name="grid-outline"/>
</View>
</TouchableOpacity>
</View>
</Animated.View>
}
</View>
</SafeAreaView>
);
}
Example #13
| Source File: Incognito.js From Turbo-Browser with MIT License | 4 votes |
|
Incognito = ({ navigation }) => {
// ["#1C2124FF", "#FFFFFFFF"]
const styleTypes = ['default','dark-content', 'light-content'];
const [statusColor, setStatusColor] = useState("#FFFFFFFF");
const [styleStatusBar, setStyleStatusBar] = useState(styleTypes[1]);
const [rippleOverflow, setRippleOverflow] = useState(false);
const scrollRef = useRef();
const fadeAnim1 = useRef(new Animated.Value(0)).current;
const transformAnim = useRef(new Animated.Value(-16)).current;
const rotateAnim1 = useRef(new Animated.Value(0)).current;
const [showMoreStatus, setShowMoreStatus] = useState(false);
const [showMoreDisp, setShowMoreDisp] = useState(false);
const [newsData, setNewsData] = useState(false);
const [searchOpen, setSearchOpen] = useState(false);
const view1marTop1 = useRef(new Animated.Value(0)).current;
const bottomViewsAll2 = useRef(new Animated.Value(1)).current;
const translY = useRef(new Animated.Value(0)).current;
const [searchValue, setSearchValue] = useState("");
const searchItemsBBo2 = useRef(new Animated.Value(0)).current;
const [optionsAlertOpen, setOptionsAlertOpen] = useState(false);
const appInfo = useSelector((state) => state.appInfo);
const speechToTextHandler = async () => {
let speechToTextData = null;
try {
speechToTextData = await SpeechToText.startSpeech('Try saying something', 'en_IN');
searchString(speechToTextData);
} catch (error) {
// error
}
}
Array.prototype.insert = function ( index, item ) {
this.splice( index, 0, item );
};
const spin = rotateAnim1.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '180deg']
});
const scrollToTop = () => {
scrollRef.current.scrollTo({
y: 0,
animated: true,
});
}
function showMoreClick(){
if(showMoreStatus == false){
setShowMoreDisp(true);
Animated.timing(
fadeAnim1,
{
toValue: 1,
duration: 200,
useNativeDriver: true,
}
).start();
setShowMoreStatus(true);
Animated.timing(
transformAnim,
{
toValue: 0,
duration: 200,
useNativeDriver: true,
}
).start();
Animated.timing(
rotateAnim1,
{
toValue: 1,
duration: 200,
useNativeDriver: true,
}
).start();
if(newsData == false){
fetch("https://api.nytimes.com/svc/topstories/v2/home.json?api-key=S54qP2LGkkPqRMJNbH3GhacbATsuLsh7", {
method: 'get',
})
.then(response => {
return response.json();
})
.then(json => {
if(json.status == "OK"){
setNewsData(json);
}
})
.catch(error => {
// Close ShowMore
Animated.timing(
fadeAnim1,
{
toValue: 0,
duration: 200,
useNativeDriver: true,
}
).start();
setShowMoreStatus(false);
Animated.timing(
transformAnim,
{
toValue: -16,
duration: 200,
useNativeDriver: true,
}
).start();
Animated.timing(
rotateAnim1,
{
toValue: 0,
duration: 200,
useNativeDriver: true,
}
).start();
});
} else {
}
} else {
Animated.timing(
fadeAnim1,
{
toValue: 0,
duration: 200,
useNativeDriver: true,
}
).start();
setShowMoreStatus(false);
Animated.timing(
transformAnim,
{
toValue: -16,
duration: 200,
useNativeDriver: true,
}
).start();
Animated.timing(
rotateAnim1,
{
toValue: 0,
duration: 200,
useNativeDriver: true,
}
).start();
scrollToTop();
setTimeout(() => {
setShowMoreDisp(false);
}, 200);
}
}
const searchBarClicked1 = () => {
setSearchValue("");
setSearchOpen(true);
scrollToTop();
Animated.timing(
translY,
{
toValue: -170,
duration: 200,
useNativeDriver: true,
}
).start();
Animated.timing(
bottomViewsAll2,
{
toValue: 0,
duration: 200,
useNativeDriver: true,
}
).start();
setTimeout(() => {
Animated.timing(
searchItemsBBo2,
{
toValue: 1,
duration: 400,
useNativeDriver: true,
}
).start();
}, 200);
}
const closeSearchBtn = () => {
setSearchOpen(false);
Animated.timing(
translY,
{
toValue: 0,
duration: 200,
useNativeDriver: true,
}
).start();
Animated.timing(
bottomViewsAll2,
{
toValue: 1,
duration: 200,
useNativeDriver: true,
}
).start();
Animated.timing(
searchItemsBBo2,
{
toValue: 0,
duration: 400,
useNativeDriver: true,
}
).start();
}
const openWebsite = (url) => {
navigation.navigate('IncognitoSearch', { name: `turbo/${url}` });
setTimeout(() => {
setSearchOpen(false);
Animated.timing(
translY,
{
toValue: 0,
duration: 150,
useNativeDriver: true,
}
).start();
Animated.timing(
bottomViewsAll2,
{
toValue: 1,
duration: 200,
useNativeDriver: true,
}
).start();
}, 400);
}
const onSearchChangeText = (text) => {
setSearchValue(text);
}
const voiceSearchBtnClk = () => {
speechToTextHandler();
}
const openNews = (url) => {
openWebsite(url);
}
const showMoreBtnClk = () => {
openWebsite("https://news.google.com/");
}
const searchString = (string) => {
if(string == ""){
} else if (string.substring(0, 8) == "https://" || string.substring(0, 7) == "http://") {
if(string.includes("~")){
openWebsite(string);
} else {
openWebsite(string);
}
} else {
if(string.includes("~")){
openWebsite("https://duckduckgo.com/?q=" + string.replace(/ /g,"+"));
} else {
openWebsite("https://duckduckgo.com/?q=" + string.replace(/ /g,"+"));
}
}
}
useEffect(() => {
navigation.addListener('focus',
() => {
setStyleStatusBar(styleTypes[2]);
setStatusColor("#1C2124FF");
// setTimeout(() => {
// setStyleStatusBar(styleTypes[2]);
// setStatusColor("#1C2124FF");
// }, 400);
changeNavigationBarColor("#1C2124", false, true);
}
);
navigation.addListener('blur',
() => {
setStyleStatusBar(styleTypes[1]);
setStatusColor("#FFFFFFFF");
changeNavigationBarColor("#FFFFFF", true, true);
}
);
}, []);
return(
<SafeAreaView>
<StatusBar backgroundColor={statusColor} barStyle={styleStatusBar} />
<Modal
isOpen={optionsAlertOpen}
onClosed={() => {setOptionsAlertOpen(false)}}
style={[styles.modal, styles.modal8]}
position={"bottom"}
backdropPressToClose={true}
swipeToClose={false}
backdropOpacity={0.6}
backButtonClose={true}
coverScreen={false}
animationDuration={200}
transparent={true}
>
<View style={styles.optionAlertCont_MAIN}>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
navigation.navigate('Home', { name: "Incognito" });
}}>
<Text style={styles.optionAlertCont_optText_1}>
Close Incognito
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
navigation.navigate('Settings', { name: "Incognito" });
}}>
<Text style={styles.optionAlertCont_optText_1}>
Settings
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
openWebsite("https://turbo-browser.netlify.app/privacy-policy.html");
}}>
<Text style={styles.optionAlertCont_optText_1}>
Privacy Policy
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1_B}>
<TouchableOpacity onPress={() => {
BackHandler.exitApp();
}}>
<Text style={styles.optionAlertCont_optText_1}>
Exit App
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_icon_1}>
<TouchableOpacity style={{
width: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
paddingBottom: 10,
marginBottom: 4,
}} onPress={() => {setOptionsAlertOpen(false)}}>
{/* <FontAwesome style={styles.optionAlertCont_opt_icon_2} name="chevron-down"/> */}
<Image
source={require("../assets/arrowDown2Dark.png")}
style={{
height: 26,
width: 26,
}}
/>
</TouchableOpacity>
</View>
</View>
</Modal>
<ScrollView ref={scrollRef} style={styles.scrollView} scrollEnabled={!searchOpen} showsVerticalScrollIndicator={false} keyboardShouldPersistTaps={'handled'} scrollEventThrottle={1}>
<Animated.View
style={{
translateY: translY
}}
>
{/* View 1 */}
<Animated.View
style={{
marginTop: view1marTop1
}}
>
<View style={styles.view__1}>
<View style={styles.view__1_img_bg}>
<Image
source={require('../assets/incognitoDark.png')}
style={{ resizeMode: 'contain', width: 40, height: 40 }}
/>
</View>
</View>
</Animated.View>
<View style={{
position: "absolute",
right: 20,
top: 20,
height: 32,
width: 32,
backgroundColor: "#161B1DFE",
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: 32
}}>
<TouchableOpacity onPressIn={() => {
setOptionsAlertOpen(true);
}}>
<View style={{
height: 32,
width: 32,
backgroundColor: "#161B1DFE",
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: 32
}}>
<IonicIcon style={{
color: "#575d62",
fontSize: 16,
}} name="ellipsis-vertical"/>
</View>
</TouchableOpacity>
</View>
{/* View 2 */}
<View style={styles.view__2}>
<View style={{borderRadius: 40, overflow: 'hidden'}}>
<TouchableOpacity
onPress={searchBarClicked1}
style={{width: "100%"}}
>
<View style={styles.view_input_c_1}>
{
searchOpen
?
<IonicIcon onPress={closeSearchBtn} style={styles.search_icon} name="arrow-back"/>
:
<IonicIcon style={styles.search_icon} name="search"/>
}
{
searchOpen ?
<TextInput
style={{
fontSize: 14,
color: "#b1b1b1",
marginLeft: 8,
fontFamily: "Helvetica",
flexGrow: 1,
}}
value={searchValue}
onChangeText={(text) => onSearchChangeText(text)}
autoFocus={true}
editable={searchOpen}
onSubmitEditing={() => searchString(searchValue)}
placeholderTextColor="#CECFCFFF"
/>
:
<Text style={styles.search_text}>Search DuckDuckGo</Text>
}
{/* setSearchValue */}
{ searchOpen ?
((searchValue.length > 0) ? <IonicIcon onPress={() => setSearchValue("")} style={styles.mic_icon} name="close"/> : <IonicIcon onPress={voiceSearchBtnClk} style={styles.mic_icon} name="mic"/>)
:
<IonicIcon onPress={voiceSearchBtnClk} style={styles.mic_icon} name="mic"/>
}
</View>
</TouchableOpacity>
</View>
</View>
<Animated.View
style={{
opacity: bottomViewsAll2
}}
>
{/* View 5 */}
<View style={styles.view_5}>
<View style={styles.view_5_ic_1}>
<TouchableNativeFeedback
onPress={showMoreClick}
background={TouchableNativeFeedback.Ripple("#2F3A3BFE", rippleOverflow)}
>
<View style={styles.view_5_ic_2}>
<Text style={styles.view_5_txt}>
Show more
</Text>
<Animated.View
style={{
transform: [{rotate: spin}],
}}
><IonicIcon style={styles.view_5_icon} name="chevron-down"/></Animated.View>
</View>
</TouchableNativeFeedback>
</View>
</View>
<Text style={styles.incogText_B}>
Turbo doesn’t remember what you do in a Private Window. Sites you visit won't show up in your history, and downloads and bookmarks are disabled.
</Text>
{showMoreDisp ?
<View>
<Animated.View
style={{
opacity: fadeAnim1,
translateY: transformAnim,
}}
>
{newsData ?
<View>
<NewsItemDark openNew={openNews} item={newsData.results[0]}/>
<NewsItemDark openNew={openNews} item={newsData.results[1]}/>
<NewsItemDark openNew={openNews} item={newsData.results[2]}/>
<NewsItemDark openNew={openNews} item={newsData.results[3]}/>
<NewsItemDark openNew={openNews} item={newsData.results[4]}/>
<NewsItemDark openNew={openNews} item={newsData.results[5]}/>
<TouchableOpacity
onPress={showMoreBtnClk}
>
<View style={styles.browserMore__1}>
<Text style={styles.browserMore__2}>Browse More</Text>
</View>
</TouchableOpacity>
</View>
:
<View style={styles.loaderContainerAA}>
<ActivityIndicator color={'#b1b1b1'} />
</View>
}
</Animated.View>
</View>
: <View></View>
}
</Animated.View>
</Animated.View>
</ScrollView>
</SafeAreaView>
)
}
Example #14
| Source File: Home.js From Turbo-Browser with MIT License | 4 votes |
|
Home = ({ navigation, route }) => {
const styleTypes = ['default','dark-content', 'light-content'];
const [styleStatusBar, setStyleStatusBar] = useState(styleTypes[1]);
const [rippleOverflow, setRippleOverflow] = useState(false);
const scrollRef = useRef();
const fadeAnim1 = useRef(new Animated.Value(0)).current;
const transformAnim = useRef(new Animated.Value(-16)).current;
const rotateAnim1 = useRef(new Animated.Value(0)).current;
const [showMoreStatus, setShowMoreStatus] = useState(false);
const [showMoreDisp, setShowMoreDisp] = useState(false);
const [newsData, setNewsData] = useState(false);
const [searchOpen, setSearchOpen] = useState(false);
const view1marTop1 = useRef(new Animated.Value(0)).current;
const bottomViewsAll2 = useRef(new Animated.Value(1)).current;
const translY = useRef(new Animated.Value(0)).current;
const [searchValue, setSearchValue] = useState("");
const pinsOp1 = useRef(new Animated.Value(0.8)).current;
const [pin1, setPin1] = useState(" ~https://www.youtube.com/~https://res.cloudinary.com/dpj9ddsjf/image/upload/v1612294282/youtube_hbg408.png");
const [pin2, setPin2] = useState(" ~https://www.wikipedia.org/~https://res.cloudinary.com/dpj9ddsjf/image/upload/v1612294281/wikipedia_rfho3x.png");
const [pin3, setPin3] = useState(" ~https://twitter.com/explore~https://res.cloudinary.com/dpj9ddsjf/image/upload/v1612294281/twitter_swc5mx.png");
const [pin4, setPin4] = useState(" ~https://www.quora.com/~https://res.cloudinary.com/dpj9ddsjf/image/upload/v1612294281/quora_qglhgp.png");
const [pin5, setPin5] = useState(" ~https://www.amazon.in/~https://res.cloudinary.com/dpj9ddsjf/image/upload/v1612294289/amazon_msmuqy.png");
const [pin6, setPin6] = useState(" ~https://edition.cnn.com/~https://res.cloudinary.com/dpj9ddsjf/image/upload/v1612294289/CNN_attiju.png");
const [pin7, setPin7] = useState(" ~https://www.instagram.com/?hl=en~https://res.cloudinary.com/dpj9ddsjf/image/upload/v1612294281/instagram_zjam2e.png");
const [pin8, setPin8] = useState("false/AddNew/ID84422");
const [pinsReady, setPinsReady] = useState(false);
const searchItemsBBo2 = useRef(new Animated.Value(0)).current;
const [searchItems, setSearchItems] = useState([]);
const [lastSearchedWeb, setLastSearchedWeb] = useState(false);
const [pinAlertOpen, setPinAlertOpen] = useState(false);
const [optionsAlertOpen, setOptionsAlertOpen] = useState(false);
const [EBName, setEBName] = useState("");
const [EBUrl, setEBUrl] = useState("");
const [currentClickedPin, setCurrentClickedPin] = useState(8);
const adOpacity = useRef(new Animated.Value(0)).current;
const adTransY = useRef(new Animated.Value(-10)).current;
const [adVisible, setAdVisible] = useState(false);
const [adInfo, setAdInfo] = useState({
title: "",
description: "",
imageUrl: "",
urlTarget: "new",
url: "",
time: ""
});
const appInfo = useSelector((state) => state.appInfo);
const dispatch = useDispatch();
const getAppInfo = async () => {
try {
const jsonValue = await AsyncStorage.getItem("appInfo");
if(jsonValue !== null) {
const value = JSON.parse(jsonValue);
dispatch({type: "CHANGE_APPINFO", value: value});
}
} catch (error) {
// error
}
}
useEffect(() => {
fetch('https://turbo-browser-api.netlify.app/adInfo.json')
.then(
(response) => response.json()
)
.then(
(data) => {
if(data.visible == "true"){
setAdVisible(true);
Animated.timing(
adOpacity,
{
toValue: 1,
duration: appInfo.animations == false ? 0 : 400,
useNativeDriver: true,
}
).start();
Animated.timing(
adTransY,
{
toValue: 0,
duration: appInfo.animations == false ? 0 : 400,
useNativeDriver: true,
}
).start();
} else {
setAdVisible(false);
}
setAdInfo({
title: data.title,
description: data.adDescription,
imageUrl: data.imageURL,
urlTarget: data.urlTarget,
url: data.url,
time: data.time
});
}
);
}, []);
const speechToTextHandler = async () => {
let speechToTextData = null;
try {
speechToTextData = await SpeechToText.startSpeech('Try saying something', 'en_IN');
searchString(speechToTextData);
} catch (error) {
// error
}
}
Array.prototype.insert = function ( index, item ) {
this.splice( index, 0, item );
};
const spin = rotateAnim1.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '180deg']
});
const scrollToTop = () => {
scrollRef.current.scrollTo({
y: 0,
animated: appInfo.animations,
});
}
const storeData1 = async (key, value) => {
try {
// saving data
await AsyncStorage.setItem(key, value);
} catch (e) {
// error
return false;
}
}
const storeData2 = async (key, value) => {
try {
// saving data
await AsyncStorage.setItem(key, value);
} catch (e) {
// error
return false;
}
}
const getAndStoreSearch = async (v2S) => {
try {
const value = await AsyncStorage.getItem("searchItems");
if(value !== null) {
// value previously stored
let parsedValue = JSON.parse(value);
let newValue = {
key: uuidv4(),
item: v2S
};
parsedValue.insert(0, newValue);
// let newValue2 = parsedValue.splice(0, 0,newValue)
let val2StoreA = JSON.stringify(parsedValue);
storeData2("searchItems", val2StoreA);
} else {
let val2StoreB = JSON.stringify([{
key: uuidv4(),
item: v2S
}]);
storeData2("searchItems", val2StoreB);
}
} catch(e) {
// error reading value
}
}
const getData1 = async (key) => {
try {
const value = await AsyncStorage.getItem(key);
if(value == "true"){
// Get Pins from storage and fill their states
const p1 = await AsyncStorage.getItem("pin1");
const p2 = await AsyncStorage.getItem("pin2");
const p3 = await AsyncStorage.getItem("pin3");
const p4 = await AsyncStorage.getItem("pin4");
const p5 = await AsyncStorage.getItem("pin5");
const p6 = await AsyncStorage.getItem("pin6");
const p7 = await AsyncStorage.getItem("pin7");
const p8 = await AsyncStorage.getItem("pin8");
setPin1(p1);
setPin2(p2);
setPin3(p3);
setPin4(p4);
setPin5(p5);
setPin6(p6);
setPin7(p7);
setPin8(p8);
setPinsReady(true);
Animated.timing(
pinsOp1,
{
toValue: 1,
duration: appInfo.animations == false ? 0 : 200,
useNativeDriver: true,
}
).start();
} else {
// First time app is being opened
// Store the pins
storeData1("pin1", "YouTube~https://www.youtube.com/~https://res.cloudinary.com/dpj9ddsjf/image/upload/v1612294282/youtube_hbg408.png");
storeData1("pin2", "Wikipedia~https://www.wikipedia.org/~https://res.cloudinary.com/dpj9ddsjf/image/upload/v1612294281/wikipedia_rfho3x.png");
storeData1("pin3", "Twitter~https://twitter.com/explore~https://res.cloudinary.com/dpj9ddsjf/image/upload/v1612294281/twitter_swc5mx.png");
storeData1("pin4", "Quora~https://www.quora.com/~https://res.cloudinary.com/dpj9ddsjf/image/upload/v1612294281/quora_qglhgp.png");
storeData1("pin5", "Amazon~https://www.amazon.in/~https://res.cloudinary.com/dpj9ddsjf/image/upload/v1612294289/amazon_msmuqy.png");
storeData1("pin6", "CNN~https://edition.cnn.com/~https://res.cloudinary.com/dpj9ddsjf/image/upload/v1612294289/CNN_attiju.png");
storeData1("pin7", "Instagram~https://www.instagram.com/?hl=en~https://res.cloudinary.com/dpj9ddsjf/image/upload/v1612294281/instagram_zjam2e.png");
storeData1("pin8", "false/AddNew/ID84422");
storeData1("inApp", "true");
storeData1("appInfo", JSON.stringify({
searchEngine: "Google",
animations: true,
animationDirection: true,
disableCookies: false,
disableJS: false
}));
// Get Pins from storage and fill their states
const p1 = await AsyncStorage.getItem("pin1");
const p2 = await AsyncStorage.getItem("pin2");
const p3 = await AsyncStorage.getItem("pin3");
const p4 = await AsyncStorage.getItem("pin4");
const p5 = await AsyncStorage.getItem("pin5");
const p6 = await AsyncStorage.getItem("pin6");
const p7 = await AsyncStorage.getItem("pin7");
const p8 = await AsyncStorage.getItem("pin8");
setPin1(p1);
setPin2(p2);
setPin3(p3);
setPin4(p4);
setPin5(p5);
setPin6(p6);
setPin7(p7);
setPin8(p8);
setPinsReady(true);
Animated.timing(
pinsOp1,
{
toValue: 1,
duration: appInfo.animations == false ? 0 : 200,
useNativeDriver: true,
}
).start();
}
} catch(e) {
// error
}
}
const getData2 = async () => {
try {
const value = await AsyncStorage.getItem("searchItems");
if(value !== null) {
// value previously stored
let gotValue = JSON.parse(value);
setSearchItems(gotValue);
}
} catch(e) {
// error reading value
}
}
const getData4 = async () => {
try {
const value = await AsyncStorage.getItem("lastSearchedWeb");
if(value !== null) {
// value previously stored
setLastSearchedWeb(JSON.parse(value));
}
} catch(e) {
// error
}
}
useEffect(() => {
getData1("inApp");
}, []);
useEffect(() => {
getAppInfo();
navigation.addListener('focus',
() => {
// getData1("inApp");
// AsyncStorage.clear();
setLastSearchedWeb(false);
setSearchItems(false);
// getAppInfo();
}
);
}, [])
function showMoreClick(){
if(showMoreStatus == false){
setShowMoreDisp(true);
Animated.timing(
fadeAnim1,
{
toValue: 1,
duration: appInfo.animations == false ? 0 : 200,
useNativeDriver: true,
}
).start();
setShowMoreStatus(true);
Animated.timing(
transformAnim,
{
toValue: 0,
duration: appInfo.animations == false ? 0 : 200,
useNativeDriver: true,
}
).start();
Animated.timing(
rotateAnim1,
{
toValue: 1,
duration: appInfo.animations == false ? 0 : 200,
useNativeDriver: true,
}
).start();
if(newsData == false){
fetch("https://api.nytimes.com/svc/topstories/v2/home.json?api-key=S54qP2LGkkPqRMJNbH3GhacbATsuLsh7", {
method: 'get',
})
.then(response => {
return response.json();
})
.then(json => {
if(json.status == "OK"){
setNewsData(json);
}
})
.catch(error => {
// Close ShowMore
Animated.timing(
fadeAnim1,
{
toValue: 0,
duration: appInfo.animations == false ? 0 : 200,
useNativeDriver: true,
}
).start();
setShowMoreStatus(false);
Animated.timing(
transformAnim,
{
toValue: -16,
duration: appInfo.animations == false ? 0 : 200,
useNativeDriver: true,
}
).start();
Animated.timing(
rotateAnim1,
{
toValue: 0,
duration: appInfo.animations == false ? 0 : 200,
useNativeDriver: true,
}
).start();
});
} else {
}
} else {
Animated.timing(
fadeAnim1,
{
toValue: 0,
duration: appInfo.animations == false ? 0 : 200,
useNativeDriver: true,
}
).start();
setShowMoreStatus(false);
Animated.timing(
transformAnim,
{
toValue: -16,
duration: appInfo.animations == false ? 0 : 200,
useNativeDriver: true,
}
).start();
Animated.timing(
rotateAnim1,
{
toValue: 0,
duration: appInfo.animations == false ? 0 : 200,
useNativeDriver: true,
}
).start();
scrollToTop();
setTimeout(() => {
setShowMoreDisp(false);
}, 200);
}
}
const searchBarClicked1 = () => {
setSearchValue("");
setSearchOpen(true);
scrollToTop();
Animated.timing(
translY,
{
toValue: -170,
duration: appInfo.animations == false ? 0 : 200,
useNativeDriver: true,
}
).start();
Animated.timing(
bottomViewsAll2,
{
toValue: 0,
duration: appInfo.animations == false ? 0 : 200,
useNativeDriver: true,
}
).start();
setTimeout(() => {
Animated.timing(
searchItemsBBo2,
{
toValue: 1,
duration: appInfo.animations == false ? 0 : 400,
useNativeDriver: true,
}
).start();
}, 200);
setTimeout(() => {
getData4();
getData2();
}, 200);
}
Keyboard.addListener("keyboardDidHide", function(){
// closeSearchBtn();
});
const closeSearchBtn = () => {
setSearchOpen(false);
Animated.timing(
translY,
{
toValue: 0,
duration: appInfo.animations == false ? 0 : 200,
useNativeDriver: true,
}
).start();
Animated.timing(
bottomViewsAll2,
{
toValue: 1,
duration: appInfo.animations == false ? 0 : 200,
useNativeDriver: true,
}
).start();
Animated.timing(
searchItemsBBo2,
{
toValue: 0,
duration: appInfo.animations == false ? 0 : 400,
useNativeDriver: true,
}
).start();
}
const openWebsite = (url) => {
navigation.navigate('Search', { name: `turbo/${url}` });
setTimeout(() => {
setSearchOpen(false);
Animated.timing(
translY,
{
toValue: 0,
duration: appInfo.animations == false ? 0 : 150,
useNativeDriver: true,
}
).start();
Animated.timing(
bottomViewsAll2,
{
toValue: 1,
duration: appInfo.animations == false ? 0 : 200,
useNativeDriver: true,
}
).start();
}, 400);
}
const onSearchChangeText = (text) => {
setSearchValue(text);
}
const onEditBChangeName = (text) => {
setEBName(text);
}
const onEditBChangeURL = (text) => {
setEBUrl(text);
}
const voiceSearchBtnClk = () => {
speechToTextHandler();
}
const removeValue = async () => {
try {
await AsyncStorage.removeItem("lastSearchedWeb");
setLastSearchedWeb(false);
} catch(e) {
// error
}
}
const deleteLastSearchWeb = () => {
removeValue();
}
const openNews = (url) => {
openWebsite(url);
}
const showMoreBtnClk = () => {
openWebsite("https://news.google.com/");
}
const searchString = (string) => {
if(string == ""){
} else if (string.substring(0, 8) == "https://" || string.substring(0, 7) == "http://") {
if(string.includes("~")){
openWebsite(string);
} else {
openWebsite(string);
setTimeout(() => {
getAndStoreSearch(string);
}, 400);
}
} else {
if(string.includes("~")){
if(appInfo.searchEngine == "Google"){
openWebsite("https://www.google.com/search?q=" + string.replace(/ /g,"+"));
} else if (appInfo.searchEngine == "DuckDuckGo") {
openWebsite("https://duckduckgo.com/?q=" + string.replace(/ /g,"+"));
} else if (appInfo.searchEngine == "Bing") {
openWebsite("https://www.bing.com/search?q=" + string.replace(/ /g,"+"));
} else if (appInfo.searchEngine == "Yahoo!") {
openWebsite("https://in.search.yahoo.com/search?p=" + string.replace(/ /g,"+"));
} else {
openWebsite("https://www.google.com/search?q=" + string.replace(/ /g,"+"));
}
} else {
if(appInfo.searchEngine == "Google"){
openWebsite("https://www.google.com/search?q=" + string.replace(/ /g,"+"));
} else if (appInfo.searchEngine == "DuckDuckGo") {
openWebsite("https://duckduckgo.com/?q=" + string.replace(/ /g,"+"));
} else if (appInfo.searchEngine == "Bing") {
openWebsite("https://www.bing.com/search?q=" + string.replace(/ /g,"+"));
} else if (appInfo.searchEngine == "Yahoo!") {
openWebsite("https://in.search.yahoo.com/search?p=" + string.replace(/ /g,"+"));
} else {
openWebsite("https://www.google.com/search?q=" + string.replace(/ /g,"+"));
}
setTimeout(() => {
getAndStoreSearch(string);
}, 400);
}
}
}
const openOutlineHandle = (string) => {
setSearchValue(string);
}
const openWebsiteHandle = (string) => {
searchString(string);
}
const showAlert1 = (id) => {
setCurrentClickedPin(id);
setPinAlertOpen(true);
}
const savePIN = async (pinToSet) => {
if(
EBName.includes("~") ||
EBUrl.includes("~") ||
EBName.trim() == "" ||
EBUrl.trim() == ""
){
// Do nothing
} else {
try {
// ;-;
storeData1("pin" + pinToSet, EBName.trim() + "~" + EBUrl.trim() + "~" + "https://api.statvoo.com/favicon/?url=" + EBUrl.trim());
if (pinToSet == "1") {
setPin1(EBName.trim() + "~" + EBUrl.trim() + "~" + "https://api.statvoo.com/favicon/?url=" + EBUrl.trim());
} else if(pinToSet == "2") {
setPin2(EBName.trim() + "~" + EBUrl.trim() + "~" + "https://api.statvoo.com/favicon/?url=" + EBUrl.trim());
} else if(pinToSet == "3") {
setPin3(EBName.trim() + "~" + EBUrl + "~" + "https://api.statvoo.com/favicon/?url=" + EBUrl.trim());
} else if(pinToSet == "4") {
setPin4(EBName.trim() + "~" + EBUrl + "~" + "https://api.statvoo.com/favicon/?url=" + EBUrl.trim());
} else if(pinToSet == "5") {
setPin5(EBName.trim() + "~" + EBUrl + "~" + "https://api.statvoo.com/favicon/?url=" + EBUrl.trim());
} else if(pinToSet == "6") {
setPin6(EBName.trim() + "~" + EBUrl + "~" + "https://api.statvoo.com/favicon/?url=" + EBUrl.trim());
} else if(pinToSet == "7") {
setPin7(EBName.trim() + "~" + EBUrl + "~" + "https://api.statvoo.com/favicon/?url=" + EBUrl.trim());
} else if(pinToSet == "8") {
setPin8(EBName.trim() + "~" + EBUrl + "~" + "https://api.statvoo.com/favicon/?url=" + EBUrl.trim());
} else {
setPin8(EBName.trim() + "~" + EBUrl.trim() + "~" + "https://api.statvoo.com/favicon/?url=" + EBUrl.trim());
}
setPinAlertOpen(false);
setEBName("");
setEBUrl("");
} catch (error) {
// error
}
}
}
return(
<SafeAreaView>
<StatusBar backgroundColor="#ffffff" barStyle={styleStatusBar} />
<Modal
isOpen={optionsAlertOpen}
onClosed={() => {setOptionsAlertOpen(false)}}
style={[styles.modal, styles.modal8]}
position={"bottom"}
backdropPressToClose={true}
swipeToClose={false}
backdropOpacity={0.2}
backButtonClose={true}
coverScreen={true}
animationDuration={appInfo.animations == false ? 0 : 200}
>
<View style={styles.optionAlertCont_MAIN}>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
navigation.navigate('Incognito', { name: "Home" });
}}>
<Text style={styles.optionAlertCont_optText_1}>
Go Incognito
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
navigation.navigate('Bookmarks', { name: "Home" });
}}>
<Text style={styles.optionAlertCont_optText_1}>
Bookmarks
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
navigation.navigate('History', { name: "Home" });
}}>
<Text style={styles.optionAlertCont_optText_1}>
History
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
navigation.navigate('Settings', { name: "Home" });
}}>
<Text style={styles.optionAlertCont_optText_1}>
Settings
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
openWebsite("https://turbo-browser.netlify.app/privacy-policy.html");
}}>
<Text style={styles.optionAlertCont_optText_1}>
Privacy Policy
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
navigation.navigate('Help', { name: "Home" });
}}>
<Text style={styles.optionAlertCont_optText_1}>
FAQs
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1_B}>
<TouchableOpacity onPress={() => {
BackHandler.exitApp();
}}>
<Text style={styles.optionAlertCont_optText_1}>
Exit App
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_icon_1}>
<TouchableOpacity style={{
width: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
paddingBottom: 10,
marginBottom: 4,
}} onPress={() => {setOptionsAlertOpen(false)}}>
{/* <FontAwesome style={styles.optionAlertCont_opt_icon_2} name="chevron-down"/> */}
<Image
source={require("../assets/arrowDown2.png")}
style={{
height: 26,
width: 26,
}}
/>
</TouchableOpacity>
</View>
</View>
</Modal>
<Modal
isOpen={pinAlertOpen}
onClosed={() => {setPinAlertOpen(false)}}
style={[styles.modal, styles.modal4]}
position={"center"}
backdropPressToClose={true}
swipeToClose={false}
backdropOpacity={0.2}
backButtonClose={true}
coverScreen={true}
animationDuration={appInfo.animations == false ? 0 : 200}
>
{/* <StatusBar backgroundColor="#CCCCCCFF" barStyle={styleStatusBar} /> */}
<View style={styles.pinAlertCont_MAIN}>
<View style={styles.pinAlertContAA}>
<View style={styles.pinAlertCont1_1}>
<IonicIcon name="bookmark" style={styles.pinAlertCont1_1_icon}/>
</View>
<View style={styles.pinAlertCont1_2}>
<Text style={styles.pinAlertCont1_2_txt}>Edit Bookmark</Text>
</View>
<View style={styles.pinAlertCont1_3}>
<View
style={{
borderRadius: 18,
overflow: "hidden",
}}>
<TouchableOpacity onPress={() => {setPinAlertOpen(false)}}>
<View style={styles.pinAlertCont1_3_ripple}>
<IonicIcon name="close" style={styles.pinAlertCont1_3_icon}/>
</View>
</TouchableOpacity>
</View>
</View>
</View>
<View style={styles.pinAlertContBB}>
<View style={styles.pinAlertCont1_B_1}>
<Text style={styles.pinAlertCont1_B_1_TXT}>Name</Text>
</View>
<View style={styles.pinAlertCont1_B_2}>
<TextInput
style={{
fontSize: 14,
color: "#888787FE",
marginLeft: 8,
fontFamily: "Helvetica",
flexGrow: 1,
borderWidth: 1.6,
borderRadius: 4,
borderColor: "#D2CECEFE",
paddingLeft: 8,
paddingTop: 6,
paddingBottom: 6,
}}
value={EBName}
onChangeText={(text) => onEditBChangeName(text)}
editable={true}
placeholder="Enter Name"
placeholderTextColor="#C7C3C3FE"
/>
</View>
</View>
<View style={styles.pinAlertContCC}>
<View style={styles.pinAlertCont1_C_1}>
<Text style={styles.pinAlertCont1_B_2_TXT}>URL</Text>
</View>
<View style={styles.pinAlertCont1_C_2}>
<TextInput
style={{
fontSize: 14,
color: "#888787FE",
marginLeft: 8,
fontFamily: "Helvetica",
flexGrow: 1,
borderWidth: 1.6,
borderRadius: 4,
borderColor: "#D2CECEFE",
paddingLeft: 8,
paddingTop: 6,
paddingBottom: 6,
}}
value={EBUrl}
onChangeText={(text) => onEditBChangeURL(text)}
editable={true}
placeholder="Enter URL"
placeholderTextColor="#C7C3C3FE"
/>
</View>
</View>
<View style={styles.pinAlertContDD}>
<View style={styles.pinAlertCont1_D_1}>
<TouchableOpacity onPress={() => {setPinAlertOpen(false)}}>
<Text style={styles.pinAlertCont1_D_1_TXT}>Cancel</Text>
</TouchableOpacity>
</View>
<View style={styles.pinAlertCont1_D_2}>
<TouchableOpacity onPress={() => {
savePIN(currentClickedPin);
}}>
<Text style={
EBName.length || EBUrl.length > 0 ?
styles.pinAlertCont1_D_2_TXT_HIG
: styles.pinAlertCont1_D_2_TXT
}>Save</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
<ScrollView ref={scrollRef} style={styles.scrollView} scrollEnabled={!searchOpen} showsVerticalScrollIndicator={false} keyboardShouldPersistTaps={'handled'} scrollEventThrottle={1}>
<Animated.View
style={{
translateY: translY
}}
>
{/* View 1 */}
<Animated.View
style={{
marginTop: view1marTop1
}}
>
<View style={styles.view__1}>
{
appInfo.searchEngine == "Google" ?
<>
<Image
source={require("../assets/googleIcon.png")}
style={{ resizeMode: 'contain', width: 32, height: 32 }}
/>
</> : <></>
}
{
appInfo.searchEngine == "DuckDuckGo" ?
<>
<Image
source={require("../assets/duckDuckGoIcon.png")}
style={{ resizeMode: 'contain', width: 32, height: 32 }}
/>
</> : <></>
}
{
appInfo.searchEngine == "Bing" ?
<>
<Image
source={require("../assets/bingIcon.png")}
style={{ resizeMode: 'contain', width: 32, height: 32 }}
/>
</> : <></>
}
{
appInfo.searchEngine == "Yahoo!" ?
<>
<Image
source={require("../assets/YahooIcon.png")}
style={{ resizeMode: 'contain', width: 32, height: 32 }}
/>
</> : <></>
}
{/* <Image
source={require('../assets/googleIcon.png')}
style={{ resizeMode: 'contain', width: 32, height: 32 }}
/> */}
</View>
</Animated.View>
<View style={{
position: "absolute",
right: 20,
top: 20,
height: 32,
width: 32,
backgroundColor: "#F5F5F5",
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: 32
}}>
<TouchableOpacity onPressIn={() => {
setOptionsAlertOpen(true);
}}>
<View style={{
height: 32,
width: 32,
backgroundColor: "#F5F5F5",
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: 32
}}>
<IonicIcon style={{
color: "#8F8D8DFE",
fontSize: 16,
}} name="ellipsis-vertical"/>
</View>
</TouchableOpacity>
</View>
{/* View 2 */}
<View style={styles.view__2}>
<View style={{borderRadius: 40, overflow: 'hidden'}}>
<TouchableOpacity
onPress={searchBarClicked1}
style={{width: "100%"}}
>
<View style={styles.view_input_c_1}>
{
searchOpen
?
<IonicIcon onPress={closeSearchBtn} style={styles.search_icon} name="arrow-back"/>
:
<IonicIcon style={styles.search_icon} name="search"/>
}
{
searchOpen ?
<TextInput
style={{
fontSize: 14,
color: "#5B5D5DFF",
marginLeft: 8,
fontFamily: "Helvetica",
flexGrow: 1,
}}
value={searchValue}
onChangeText={(text) => onSearchChangeText(text)}
autoFocus={true}
editable={searchOpen}
onSubmitEditing={() => searchString(searchValue)}
placeholderTextColor="#CECFCFFF"
/>
:
<Text style={styles.search_text}>Search {appInfo.searchEngine.replace("!", "")}</Text>
}
{/* setSearchValue */}
{ searchOpen ?
((searchValue.length > 0) ? <IonicIcon onPress={() => setSearchValue("")} style={styles.mic_icon} name="close"/> : <IonicIcon onPress={voiceSearchBtnClk} style={styles.mic_icon} name="mic"/>)
:
<IonicIcon onPress={voiceSearchBtnClk} style={styles.mic_icon} name="mic"/>
}
</View>
</TouchableOpacity>
</View>
</View>
{/* Search */}
<Animated.View
style={{
opacity: searchItemsBBo2,
}}
>
{
searchOpen ?
<View style={styles.searchItemsBB_1}>
{
lastSearchedWeb == false || searchValue !== "" ?
<></> :
<View style={styles.searchItemsBB_CON_1}>
<View>
<IonicIcon style={styles.searchItemsBB_1_A} name="globe-outline"/>
</View>
<View style={styles.searchItemsBB_1_B_CON}>
<TouchableOpacity onPress={() => {openWebsite(lastSearchedWeb.url)}}>
<View>
<Text style={styles.searchItemsBB_1_B}>
{lastSearchedWeb.name.length > 26 ? lastSearchedWeb.name.substring(0, 24) + "..." : lastSearchedWeb.name}
</Text>
<Text style={styles.searchItemsBB_1_B__2}>
{lastSearchedWeb.url.length > 38 ? lastSearchedWeb.url.substring(0, 36) + "..." : lastSearchedWeb.url}
</Text>
</View>
</TouchableOpacity>
</View>
<View>
<TouchableOpacity onPress={deleteLastSearchWeb}>
<IonicIcon style={styles.searchItemsBB_1_C} name="trash-outline"/>
</TouchableOpacity>
</View>
</View>
}
{
searchItems == "" ? <></> :
<>
{
searchValue !== "" ?
<></> :
<Text style={styles.searchHeadingB_1}>SEARCH HISTORY</Text>
}
<SearchItem searchValue={searchValue} searchItems={searchItems} openOutlineHandle={openOutlineHandle} openWebsiteHandle={openWebsiteHandle}/>
</>
}
</View>
:
<></>
}
</Animated.View>
<Animated.View
style={{
opacity: bottomViewsAll2
}}
>
{/* This part became a little messed up ;-; */}
{
!pinsReady ?
<View>
{/* View 3 */}
<View style={styles.view_3}>
<View style={styles.view_3_item_c}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFFFF", rippleOverflow)}
>
<View style={styles.view_3_imgc1}>
</View>
</TouchableNativeFeedback>
<Text style={styles.view_3_item_txt}> </Text>
</View>
<View style={styles.view_3_item_c}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFFFF", rippleOverflow)}
>
<View style={styles.view_3_imgc1}>
</View>
</TouchableNativeFeedback>
<Text style={styles.view_3_item_txt}> </Text>
</View>
<View style={styles.view_3_item_c}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFFFF", rippleOverflow)}
>
<View style={styles.view_3_imgc1}>
</View>
</TouchableNativeFeedback>
<Text style={styles.view_3_item_txt}> </Text>
</View>
<View style={styles.view_3_item_c}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFFFF", rippleOverflow)}
>
<View style={styles.view_3_imgc1}>
</View>
</TouchableNativeFeedback>
<Text style={styles.view_3_item_txt}> </Text>
</View>
</View>
{/* View 4 */}
<View style={styles.view_4}>
<View style={styles.view_3_item_c}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFFFF", rippleOverflow)}
>
<View style={styles.view_3_imgc1}>
</View>
</TouchableNativeFeedback>
<Text style={styles.view_3_item_txt}> </Text>
</View>
<View style={styles.view_3_item_c}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFFFF", rippleOverflow)}
>
<View style={styles.view_3_imgc1}>
</View>
</TouchableNativeFeedback>
<Text style={styles.view_3_item_txt}> </Text>
</View>
<View style={styles.view_3_item_c}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFFFF", rippleOverflow)}
>
<View style={styles.view_3_imgc1}>
</View>
</TouchableNativeFeedback>
<Text style={styles.view_3_item_txt}> </Text>
</View>
<View style={styles.view_3_item_c}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFFFF", rippleOverflow)}
>
<View style={styles.view_3_imgc1}>
</View>
</TouchableNativeFeedback>
<Text style={styles.view_3_item_txt}> </Text>
</View>
</View>
</View>
:
<View>
<Animated.View
style={{
opacity: pinsOp1
}}
>
{/* View 3 */}
<View style={styles.view_3}>
<View style={styles.view_3_item_c}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFFFF", rippleOverflow)}
onPress={() => {openWebsite(pin1.split("~")[1])}}
onLongPress={() => {
setEBName(pin1.split("~")[0]);
setEBUrl(pin1.split("~")[1]);
showAlert1("1");
}}
>
<View style={styles.view_3_imgc1}>
<Image
source={{uri: pin1.split("~")[2]}}
style={styles.view_item_img}
/>
</View>
</TouchableNativeFeedback>
<Text style={styles.view_3_item_txt}>{pin1.split("~")[0]}</Text>
</View>
<View style={styles.view_3_item_c}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFFFF", rippleOverflow)}
onPress={() => {openWebsite(pin2.split("~")[1])}}
onLongPress={() => {
setEBName(pin2.split("~")[0]);
setEBUrl(pin2.split("~")[1]);
showAlert1("2");
}}
>
<View style={styles.view_3_imgc1}>
<Image
source={{uri: pin2.split("~")[2]}}
style={styles.view_item_img}
/>
</View>
</TouchableNativeFeedback>
<Text style={styles.view_3_item_txt}>{pin2.split("~")[0]}</Text>
</View>
<View style={styles.view_3_item_c}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFFFF", rippleOverflow)}
onPress={() => {openWebsite(pin3.split("~")[1])}}
onLongPress={() => {
setEBName(pin3.split("~")[0]);
setEBUrl(pin3.split("~")[1]);
showAlert1("3");
}}
>
<View style={styles.view_3_imgc1}>
<Image
source={{uri: pin3.split("~")[2]}}
style={styles.view_item_img}
/>
</View>
</TouchableNativeFeedback>
<Text style={styles.view_3_item_txt}>{pin3.split("~")[0]}</Text>
</View>
<View style={styles.view_3_item_c}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFFFF", rippleOverflow)}
onPress={() => {openWebsite(pin4.split("~")[1])}}
onLongPress={() => {
setEBName(pin4.split("~")[0]);
setEBUrl(pin4.split("~")[1]);
showAlert1("4");
}}
>
<View style={styles.view_3_imgc1}>
<Image
source={{uri: pin4.split("~")[2]}}
style={styles.view_item_img}
/>
</View>
</TouchableNativeFeedback>
<Text style={styles.view_3_item_txt}>{pin4.split("~")[0]}</Text>
</View>
</View>
{/* View 4 */}
<View style={styles.view_4}>
<View style={styles.view_3_item_c}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFFFF", rippleOverflow)}
onPress={() => {openWebsite(pin5.split("~")[1])}}
onLongPress={() => {
setEBName(pin5.split("~")[0]);
setEBUrl(pin5.split("~")[1]);
showAlert1("5");
}}
>
<View style={styles.view_3_imgc1}>
<Image
source={{uri: pin5.split("~")[2]}}
style={styles.view_item_img}
/>
</View>
</TouchableNativeFeedback>
<Text style={styles.view_3_item_txt}>{pin5.split("~")[0]}</Text>
</View>
<View style={styles.view_3_item_c}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFFFF", rippleOverflow)}
onPress={() => {openWebsite(pin6.split("~")[1])}}
onLongPress={() => {
setEBName(pin6.split("~")[0]);
setEBUrl(pin6.split("~")[1]);
showAlert1("6");
}}
>
<View style={styles.view_3_imgc1}>
<Image
source={{uri: pin6.split("~")[2]}}
style={styles.view_item_img}
/>
</View>
</TouchableNativeFeedback>
<Text style={styles.view_3_item_txt}>{pin6.split("~")[0]}</Text>
</View>
<View style={styles.view_3_item_c}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFFFF", rippleOverflow)}
onPress={() => {openWebsite(pin7.split("~")[1])}}
onLongPress={() => {
setEBName(pin7.split("~")[0]);
setEBUrl(pin7.split("~")[1]);
showAlert1("7");
}}
>
<View style={styles.view_3_imgc1}>
<Image
source={{uri: pin7.split("~")[2]}}
style={styles.view_item_img}
/>
</View>
</TouchableNativeFeedback>
<Text style={styles.view_3_item_txt}>{pin7.split("~")[0]}</Text>
</View>
<View style={styles.view_3_item_c}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFFFF", rippleOverflow)}
onLongPress={() => {
if(pin8 !== "false/AddNew/ID84422"){
setEBName(pin8.split("~")[0]);
setEBUrl(pin8.split("~")[1]);
} else {
setEBName("");
setEBUrl("");
}
showAlert1("8");
}}
onPress={() => {
if(pin8 == "false/AddNew/ID84422"){
setEBName("");
setEBUrl("");
showAlert1("8");
} else {
openWebsite(pin8.split("~")[1]);
}
}}
>
{
pin8 == "false/AddNew/ID84422" ?
<View style={styles.view_3_imgc1}>
<IonicIcon style={{color: "#929292FF", fontSize: 24}} name="add"/>
</View>
:
<View style={styles.view_3_imgc1}>
<Image
source={{uri: pin8.split("~")[2]}}
style={styles.view_item_img}
/>
</View>
}
</TouchableNativeFeedback>
<Text style={styles.view_3_item_txt}>
{(pin8 == "false/AddNew/ID84422") ? "Add New" : pin8.split("~")[0]}
</Text>
</View>
</View>
</Animated.View>
</View>
}
{/* View AD */}
{
adVisible ?
<Animated.View
style={{
opacity: adOpacity,
translateY: adTransY
}}
>
<View style={styles.view_5_A__1AA__2}>
<TouchableNativeFeedback
onPress={() => {
if(adInfo.urlTarget == "new") {
Linking.openURL(adInfo.url);
} else {
openWebsite(adInfo.url);
}
}}
background={TouchableNativeFeedback.Ripple("#F0EFEFFE", false)}
>
<View style={styles.view_5_AA}>
<View style={styles.view_5_A_2}>
<Image
source={{uri: adInfo.imageUrl}}
style={styles.view_5_A_2_A}
/>
</View>
<View style={styles.view_5_A_3}>
<Text style={styles.view_5_A_3_A}>
<View>
<Text style={styles.view_heTxt_2BB}>
<Text style={styles.view_heTxt_2CC}>
{adInfo.title}
</Text>
</Text>
</View>
</Text>
<Text style={styles.view_5_A_3_B}>
{adInfo.description}
</Text>
</View>
</View>
</TouchableNativeFeedback>
</View>
</Animated.View>
:
<></>
}
{/* View 5 */}
<View style={styles.view_5}>
<View style={styles.view_5_ic_1}>
<TouchableNativeFeedback
onPress={showMoreClick}
background={TouchableNativeFeedback.Ripple("#d1d3d6", rippleOverflow)}
>
<View style={styles.view_5_ic_2}>
<Text style={styles.view_5_txt}>
Show more
</Text>
<Animated.View
style={{
transform: [{rotate: spin}],
}}
><IonicIcon style={styles.view_5_icon} name="chevron-down"/></Animated.View>
</View>
</TouchableNativeFeedback>
</View>
</View>
{showMoreDisp ?
<View>
<Animated.View
style={{
opacity: fadeAnim1,
translateY: transformAnim,
}}
>
{newsData ?
<View>
<NewsItem openNew={openNews} item={newsData.results[0]}/>
<NewsItem openNew={openNews} item={newsData.results[1]}/>
<NewsItem openNew={openNews} item={newsData.results[2]}/>
<NewsItem openNew={openNews} item={newsData.results[3]}/>
<NewsItem openNew={openNews} item={newsData.results[4]}/>
<NewsItem openNew={openNews} item={newsData.results[5]}/>
<TouchableOpacity
onPress={showMoreBtnClk}
>
<View style={styles.browserMore__1}>
<Text style={styles.browserMore__2}>Browse More</Text>
</View>
</TouchableOpacity>
</View>
:
<View style={styles.loaderContainerAA}>
<ActivityIndicator color={'#8F8D8DFE'} />
</View>
}
</Animated.View>
</View>
: <View></View>
}
</Animated.View>
</Animated.View>
</ScrollView>
</SafeAreaView>
)
}
Example #15
| Source File: History.js From Turbo-Browser with MIT License | 4 votes |
|
History = ({ navigation, route }) => {
const styleTypes = ['default','dark-content', 'light-content'];
const [styleStatusBar, setStyleStatusBar] = useState(styleTypes[1]);
const [rippleOverflow, setRippleOverflow] = useState(false);
const [optionsAlertOpen, setOptionsAlertOpen] = useState(false);
const [searchValue, setSearchValue] = useState("");
const [filtereHistoryList, setFiltereHistoryList] = useState([null]);
const [historyValue, setHistoryValue] = useState([null]);
const [searchVisible, setSearchVisible] = useState(false);
const lottieOpacity = useRef(new Animated.Value(1)).current;
const showToast = () => {
ToastAndroid.show("History cleared", ToastAndroid.SHORT);
};
const se1 = () => {
navigation.goBack();
}
const se2 = () => {
navigation.navigate('Incognito', { name: "Incognito" });
}
const se3 = () => {
navigation.navigate('Home', { name: "Home" });
}
const se4 = async () => {
try {
await AsyncStorage.removeItem("historyKey");
setHistoryValue([null]);
setTimeout(() => {
Animated.timing(
lottieOpacity,
{
toValue: 0,
duration: 10,
useNativeDriver: true,
}
).start();
setTimeout(() => {
Animated.timing(
lottieOpacity,
{
toValue: 1,
duration: 400,
useNativeDriver: true,
}
).start();
}, 20);
}, 100);
} catch (error) {
// error
}
showToast();
}
const se5 = () => {
setOptionsAlertOpen(true);
}
useEffect(() => {
Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
Keyboard.addListener("keyboardDidHide", _keyboardDidHide);
// cleanup function
return () => {
Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);
};
}, []);
const _keyboardDidShow = () => {
Animated.timing(
lottieOpacity,
{
toValue: 0,
duration: 10,
useNativeDriver: true,
}
).start();
};
const _keyboardDidHide = () => {
setSearchValue("");
setTimeout(() => {
Animated.timing(
lottieOpacity,
{
toValue: 1,
duration: 400,
useNativeDriver: true,
}
).start();
}, 100);
};
function remove_duplicates(arr) {
var obj = {};
var ret_arr = [];
for (var i = 0; i < arr.length; i++) {
obj[arr[i]] = true;
}
for (var key in obj) {
ret_arr.push(key);
}
return ret_arr;
}
function filterByValue(array, string) {
return array.filter(element => element.includes(string.toLowerCase()));
}
const getHistoryValue = async () => {
try {
const value = await AsyncStorage.getItem("historyKey");
if(value !== null) {
setHistoryValue(remove_duplicates(value.split("~")));
}
} catch(error) {
// error
}
}
useEffect(() => {
navigation.addListener('focus',
() => {
getHistoryValue();
}
);
}, []);
const openWebsite = (url) => {
navigation.navigate('Search', { name: `turbo/${url}` });
}
const searchSubmitted = (searchString) => {
setSearchVisible(false);
}
useEffect(() => {
setSearchValue(searchValue);
if(historyValue[0] !== null) {
setFiltereHistoryList(filterByValue(historyValue, searchValue));
}
// setFiltereHistoryList(filterByValue(historyValue, searchValue));
}, [searchValue]);
const onSearchChangeText = async (text) => {
setSearchValue(text);
}
return (
<SafeAreaView>
<StatusBar backgroundColor="#ffffff" barStyle={styleStatusBar} />
<Modal
isOpen={optionsAlertOpen}
onClosed={() => {setOptionsAlertOpen(false)}}
style={[styles.modal, styles.modal8]}
position={"bottom"}
backdropPressToClose={true}
swipeToClose={false}
backdropOpacity={0.2}
backButtonClose={true}
coverScreen={true}
animationDuration={200}
>
<View style={styles.optionAlertCont_MAIN}>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
navigation.navigate('Bookmarks', { name: "History" });
}}>
<Text style={styles.optionAlertCont_optText_1}>
Bookmarks
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
navigation.navigate('Settings', { name: "History" });
}}>
<Text style={styles.optionAlertCont_optText_1}>
Settings
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
navigation.navigate('Help', { name: "History" });
}}>
<Text style={styles.optionAlertCont_optText_1}>
FAQs
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1_B}>
<TouchableOpacity onPress={() => {
BackHandler.exitApp();
}}>
<Text style={styles.optionAlertCont_optText_1}>
Exit App
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_icon_1}>
<TouchableOpacity style={{
width: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
paddingBottom: 10,
marginBottom: 4,
}} onPress={() => {setOptionsAlertOpen(false)}}>
{/* <FontAwesome style={styles.optionAlertCont_opt_icon_2} name="chevron-down"/> */}
<Image
source={require("../assets/arrowDown2.png")}
style={{
height: 26,
width: 26,
}}
/>
</TouchableOpacity>
</View>
</View>
</Modal>
<View style={styles.historyMainContainer}>
<View style={styles.history_title_1}>
{
searchVisible ?
<>
<View style={styles.history1_INPUT_C}>
<TextInput
style={{
color: "#767474FE",
fontSize: 16,
fontFamily: "Helvetica",
marginLeft: 20,
flexGrow: 1,
marginTop: -10,
paddingTop: -10,
marginBottom: -10,
paddingBottom: -10,
maxWidth: 240,
}}
value={searchValue}
onChangeText={(text) => onSearchChangeText(text)}
autoFocus={true}
editable={searchVisible}
onSubmitEditing={() => {searchSubmitted(searchValue)}}
placeholderTextColor="#CECFCFFF"
placeholder="Search History"
/>
</View>
</>
:
<>
<TouchableOpacity onPress={() => {navigation.goBack()}}>
<View style={styles.history1_AA}>
<IonicIcon name="arrow-back" style={styles.history_title_1A_icon}/>
</View>
</TouchableOpacity>
<View style={styles.history1_BB}>
<Text style={styles.history_title_1B_txt}>History</Text>
</View>
</>
}
{
searchVisible ?
<>
<TouchableOpacity onPress={() => {
setSearchVisible(!searchVisible);
}}>
<View style={styles.history1_CC}>
<IonicIcon name="close" style={styles.history_title_1C_icon}/>
</View>
</TouchableOpacity>
</>
:
<>
<TouchableOpacity onPress={() => {
setSearchVisible(!searchVisible);
}}>
<View style={styles.history1_CC}>
<IonicIcon name="search" style={styles.history_title_1C_icon}/>
</View>
</TouchableOpacity>
</>
}
</View>
<LinearGradient colors={['#EDEEEEFE', '#FFFFFFFF']} style={styles.linearGradient_1}></LinearGradient>
<View style={styles.history_style_2}>
{
searchVisible ?
<>
{
filtereHistoryList.map((value, index) => {
return (
<View style={styles.his_s22_A} key={index}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#BBB9B9FE", rippleOverflow)}
onPress={() => {
openWebsite(value);
}}
>
<View style={styles.his_s22_B}>
<Text style={styles.his_s22_C_TXT}>{value}</Text>
</View>
</TouchableNativeFeedback>
</View>
)
})
}
</>
:
<>
{
historyValue[0] == null ?
<>
<View style={styles.lottieViewContainer}>
<Animated.View
style={{
opacity: lottieOpacity
}}
>
<LottieView
style={styles.lottieAnimation}
source={require('../assets/629-empty-box.json')}
autoSize={true}
autoPlay
loop
/>
<Text style={styles.lottieText}>Your browsing history appears here</Text>
</Animated.View>
</View>
</>
:
<>
{
historyValue.map((value, index) => {
return (
<View style={styles.his_s22_A} key={index}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#BBB9B9FE", rippleOverflow)}
onPress={() => {
openWebsite(value);
}}
>
<View style={styles.his_s22_B}>
<Text style={styles.his_s22_C_TXT}>{value}</Text>
</View>
</TouchableNativeFeedback>
</View>
)
})
}
</>
}
</>
}
{/* <View style={styles.his_s22_A}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#BBB9B9FE", rippleOverflow)}
onPress={() => {
openWebsite("https://github.com/lottie-react-native/lottie-react-native#readme");
}}
>
<View style={styles.his_s22_B}>
<Text style={styles.his_s22_C_TXT}>Hello world</Text>
</View>
</TouchableNativeFeedback>
</View> */}
</View>
<View style={styles.history_style_3}>
<TouchableOpacity onPress={se1} style={styles.sea_3_item}>
<View>
<IonicIcon style={styles.sea3__3_icon} name="arrow-back"/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={se2} style={styles.sea_3_item}>
<View style={{
display: "flex",
alignItems: "center",
}}>
<Image style={styles.sea3__3_icon_img} source={require("../assets/incognito.png")} />
</View>
</TouchableOpacity>
<TouchableOpacity onPress={se3} style={styles.sea_3_item}>
<View>
<IonicIcon style={styles.sea3__3_icon} name="home-outline"/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={se4} style={styles.sea_3_item}>
<View>
<IonicIcon style={styles.sea3__3_icon} name="trash-outline"/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={se5} style={styles.sea_3_item}>
<View>
<IonicIcon style={styles.sea3__3_icon} name="grid-outline"/>
</View>
</TouchableOpacity>
</View>
</View>
</SafeAreaView>
);
}
Example #16
| Source File: Card.js From SocialApp-React-Native with MIT License | 4 votes |
|
Card = (props) => {
const { post, userId, fromUserProfile } = props;
const navigation = useNavigation();
const dispatch = useDispatch();
// const liked = post.likes.indexOf(userId) !== -1;
const [isImageLoading, setIsImageLoading] = useState(true);
const [imageUri, setImageUri] = useState('')
const [showFullBody, setShowFullBody] = useState(false);
const [imgWidth, setImgWidth] = useState();
const [imgHeight, setImgHeight] = useState();
const onImageErrorHandler = () => {
setImageUri(ENV.defaultImageUri)
}
let TouchableComp = TouchableOpacity;
if(Platform.OS === 'android' && Platform.Version >= 21){
TouchableComp = TouchableNativeFeedback;
}
const deleteHandler = (id) => {
Alert.alert(
'Are you sure?',
'Do you really want to delete this post?',
[
{text: 'No', style: 'default'},
{
text: 'Yes',
style: 'destructive',
onPress: async () => {
await dispatch(postActions.deletePost(id))
showMessage({
message: "Your post was successfully deleted.",
type: "success",
icon: { icon: "success", position: 'left' },
duration: 3000
});
}
}
]
)
};
const checkLike = () => {
let match = post.likes.indexOf(userId) !== -1;
return match;
}
const toggleLike = async () => {
props.toggleLikeHandler(post._id, checkLike());
}
useEffect(() => {
let imageUrl = `${ENV.apiUrl}/post/photo/${post._id}?${new Date(post.updated)}`;
Image.getSize(imageUrl, (width, height) => {
// calculate image width and height
const screenWidth = Dimensions.get('window').width
const scaleFactor = width / screenWidth
const imageHeight = height / scaleFactor
setImgWidth(screenWidth);
setImgHeight(imageHeight);
})
}, [])
return (
<TouchableComp
background={ Platform.OS === 'ios' ? undefined : TouchableNativeFeedback.Ripple('#b3b3b3') }
onPress={() =>
fromUserProfile ?
{}
:
navigation.navigate('UserProfile', { userId: post.postedBy._id, name: post.postedBy.name }) }
>
<View style={styles.card}>
<View style={styles.cardTitleHeader}>
<View style={{ display: 'flex', flex: 1, flexDirection: 'row' }} >
<View style={styles.timeContainer}>
<Image
style={styles.userIcon}
source={{ uri: imageUri || `${ENV.apiUrl}/user/photo/${post.postedBy._id}?${new Date(post.postedBy.updated)}` }}
onError={onImageErrorHandler}
/>
<Text
style={{ fontSize: 15, alignSelf: 'center', paddingHorizontal: 10, paddingVertical: 5 }}
onPress={() => navigation.navigate('UserProfile', { userId: post.postedBy._id, name: post.postedBy.name })}
>
{post.postedBy.name + " "}
{
VerifiedUser.verifiedUsersId.includes(post.postedBy._id) && <Octicons name="verified" size={18} color={Colors.brightBlue} />
}
</Text>
</View>
<View style={{ position: 'absolute', right: 0, display: 'flex', flexDirection: 'row'}}>
<Ionicons
name={ Platform.OS === 'android' ? 'md-time' : 'ios-time' }
size= {14}
style={{ marginTop: 3 }}
/>
<Text> {timeDifference(new Date(), new Date(post.created))} </Text>
</View>
</View>
</View>
<View style={styles.cardImageContainer} >
<Image
style={{...styles.cardImage, height: imgHeight }}
source={{ uri: `${ENV.apiUrl}/post/photo/${post._id}?${new Date(post.updated)}` }}
onLoad={() => setIsImageLoading(false)}
/>
<ActivityIndicator
style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 }}
animating={isImageLoading}
size='large'
color={Colors.brightBlue}
/>
</View>
<View style={styles.cardHeader}>
<View>
<Text style={styles.title}>{post.title ? post.title : ""}</Text>
{ post.body && post.body.length > 30 ? (
<View>
{ showFullBody ? (
<Text style={styles.description}>
{post.body}
<Text
style={{ color: Colors.brightBlue }}
onPress={() => setShowFullBody((prevState) => !prevState)}
>
Read Less
</Text>
</Text>
) : (
<Text style={styles.description}>
{post.body.substring(0, 30)}
<Text
style={{ color: Colors.brightBlue }}
onPress={() => setShowFullBody((prevState) => !prevState)}
>
...Read More
</Text>
</Text>
) }
</View>
) : (
<Text style={styles.description}> {post.body} </Text>
) }
</View>
</View>
<View style={styles.cardFooter}>
<View style={styles.socialBarContainer}>
<View style={styles.socialBarSection}>
<TouchableOpacity
style={styles.socialBarButton}
onPress={toggleLike}
>
<Ionicons
name="md-thumbs-up"
size={24}
style={{ marginRight: 5 }}
color={checkLike() ? 'blue' : "black"}
/>
<Text style={styles.socialBarLabel}> {post.likes.length} </Text>
</TouchableOpacity>
</View>
<View style={styles.socialBarSection}>
<TouchableOpacity
style={styles.socialBarButton}
onPress={() => navigation.navigate('Comments',{ postId: post._id, userId: userId })}
>
<Ionicons
name="md-chatboxes"
size={24}
style={{ marginRight: 5 }}
/>
<Text style={styles.socialBarLabel}> {post.comments.length} </Text>
</TouchableOpacity>
</View>
</View>
</View>
<TouchableOpacity
onPress={() => navigation.navigate('Comments', { postId: post._id, userId: userId })}
>
{ post.comments.length > 0 ? (
<Text style={{ paddingHorizontal: 16, paddingBottom: 15, paddingTop: 5 }} >View all {post.comments.length} comments </Text>
) : (
<Text style={{ paddingHorizontal: 16, paddingBottom: 15, paddingTop: 5 }} >Comment here </Text>
) }
</TouchableOpacity>
{ post.postedBy._id === userId && (
<View style={styles.postActions} >
<View style={styles.socialBarSection}>
<TouchableOpacity
style={styles.socialBarButton}
onPress={deleteHandler.bind(this, post._id)}
>
<MaterialCommunityIcons
name="delete"
size={20}
style={{ marginRight: 5 }}
color="red"
/>
<Text style={styles.socialBarLabel}>Delete</Text>
</TouchableOpacity>
</View>
<View style={styles.socialBarSection}>
<TouchableOpacity
style={styles.socialBarButton}
onPress={() => navigation.navigate('EditPost', { postId: post._id })}
>
<MaterialCommunityIcons
name="square-edit-outline"
size={20}
style={{ marginRight: 5 }}
color={Colors.lightAccent}
/>
<Text style={styles.socialBarLabel}>Edit</Text>
</TouchableOpacity>
</View>
</View>
)}
</View>
</TouchableComp>
);
}
Example #17
| Source File: UserProfileScreen.js From SocialApp-React-Native with MIT License | 4 votes |
|
UserProfileScreen = (props) => {
const { route } = props;
const loggedInUserId = useSelector(state => state.auth.user._id);
const allUsers = useSelector(state => state.users.allUsers);
const loggedInUser = allUsers.filter(u => u._id === loggedInUserId)[0];
let userId;
if(route.params && route.params.userId){
userId = route.params.userId;
} else {
userId = useSelector(state => state.auth.user._id);
}
const users = useSelector(state => state.users.allUsers);
const posts = useSelector(state => state.posts.allPosts);
const currUser = users.filter(u => u._id === userId)[0];
const currUserPosts = posts.filter(p => p.postedBy._id === userId);
const [isRefreshing,setIsRefreshing] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [isFollowLoading, setIsFollowLoading] = useState(false);
const [imageUri, setImageUri] = useState('');
const dispatch = useDispatch();
const loadUsers = useCallback(async () => {
setIsRefreshing(true);
try {
await dispatch(usersActions.fetchUsers());
await dispatch(postsActions.fetchPosts());
} catch (err) {
console.log(err);
}
setIsRefreshing(false);
}, [dispatch, setIsLoading]);
const onImageErrorHandler = () => {
setImageUri(ENV.defaultImageUri)
}
const checkFollow = (userId) => {
const isFollowed = loggedInUser.following.filter(f => f._id === userId).length !== 0;
return isFollowed;
}
const followUserHandler = async () => {
let user = {...currUser};
delete user.created;
delete user.followers;
delete user.following;
// setIsFollowLoading(true);
if(checkFollow(user._id)){
showMessage({
message: `Your have unfollowed ${user.name}.`,
type: "warning",
duration: 3000,
icon: { icon: "warning", position: 'left' }
});
await dispatch(usersActions.unfollowUser(user))
} else {
showMessage({
message: `Your are now following ${user.name}.`,
type: "success",
duration: 3000,
icon: { icon: "success", position: 'left' }
});
await dispatch(usersActions.followUser(user))
}
// setIsFollowLoading(false);
}
const renderSectionOne = () => {
if(currUserPosts.length === 0 ){
return(
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', borderTopColor: '#c2c2c2', borderTopWidth: 1 }} >
<Text style={{ fontSize: 20, fontWeight: 'bold', marginTop: 25 }} >No Posts</Text>
{ currUser._id === loggedInUserId && (
<Button
style={{ backgroundColor: Colors.brightBlue, padding: 10, borderRadius: 25, marginTop: 15 }}
onPress={() => props.navigation.navigate('AddPost')}
>
<Text style={{ color: '#fff' }} >Create Post</Text>
</Button>
) }
</View>
)
}
return currUserPosts.map((post, index) => {
return (
<TouchableOpacity
key={index}
onPress={() => props.navigation.navigate('UserPosts', { userId: userId, postIndex: index, fromUserProfile: true })}
>
<View style={[{ width: (width) / 3 }, { height: (width) / 3 }, { marginBottom: 2 }, index % 3 !== 0 ? { paddingLeft: 2 } : { paddingLeft: 0 }]}>
<Image
style={{
flex: 1,
alignSelf: 'stretch',
width: undefined,
height: undefined,
backgroundColor: '#c2c2c2'
}}
source={
post.updated ? (
{ uri: `${ENV.apiUrl}/post/photo/${post._id}?${new Date(post.updated)}` }
) : (
{ uri: `${ENV.apiUrl}/post/photo/${post._id}` }
)
}
/>
</View>
</TouchableOpacity>
)
})
}
const renderSection = () => {
return (
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
{renderSectionOne()}
</View>
)
}
if(isLoading){
return (
<View style={styles.centered} >
<ActivityIndicator size='large' color={Colors.primary} />
</View>
);
}
let TouchableComp = TouchableOpacity;
if(Platform.OS === 'android' && Platform.Version >= 21){
TouchableComp = TouchableNativeFeedback;
}
return (
<Container style={styles.container} >
<Content
refreshControl={
<RefreshControl refreshing={isRefreshing} onRefresh={loadUsers} />
}
>
<View style={{ paddingTop: 20 }}>
{/** User Photo Stats**/}
<View style={{ flexDirection: 'row' }}>
{/**User photo takes 1/3rd of view horizontally **/}
<View
style={{ flex: 1, alignItems: 'center', justifyContent: 'flex-start' }}>
<Image
source={{ uri: imageUri || `${ENV.apiUrl}/user/photo/${currUser._id}?${new Date(currUser.updated)}` }}
onError={onImageErrorHandler}
style={{ width: 75, height: 75, borderRadius: 37.5, backgroundColor: "#c2c2c2" }}
/>
</View>
{/**User Stats take 2/3rd of view horizontally **/}
<View style={{ flex: 3 }}>
{/** Stats **/}
<View
style={{
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'flex-end'
}}
>
<View style={{ alignItems: 'center' }}>
<TouchableComp
background={ Platform.OS === 'ios' ? undefined : TouchableNativeFeedback.Ripple('#c2c2c2', true) }
onPress={() => props.navigation.navigate(
'UserPosts',
{ userId: userId, postIndex: 0, fromUserProfile: true }
)}
>
<View style={{ justifyContent: 'center', alignItems: 'center' }} >
<Text style={{ fontSize: 18 }} >{currUserPosts.length}</Text>
<Text style={{ fontSize: 12, color: 'grey' }}>Posts</Text>
</View>
</TouchableComp>
</View>
<View style={{ alignItems: 'center' }}>
<TouchableComp
background={ Platform.OS === 'ios' ? undefined : TouchableNativeFeedback.Ripple('#c2c2c2', true) }
onPress={() => props.navigation.navigate(
'UserStats',
{ activeTab: 0, currUser: currUser }
)}
>
<View style={{ justifyContent: 'center', alignItems: 'center' }} >
<Text style={{ fontSize: 18 }} >{currUser.followers.length}</Text>
<Text style={{ fontSize: 12, color: 'grey' }}>Followers</Text>
</View>
</TouchableComp>
</View>
<View style={{ alignItems: 'center' }}>
<TouchableComp
background={ Platform.OS === 'ios' ? undefined : TouchableNativeFeedback.Ripple('#c2c2c2', true) }
onPress={() => props.navigation.navigate(
'UserStats',
{ activeTab: 1, currUser: currUser }
)}
>
<View style={{ justifyContent: 'center', alignItems: 'center' }} >
<Text style={{ fontSize: 18 }} >{currUser.following.length}</Text>
<Text style={{ fontSize: 12, color: 'grey' }}>Following</Text>
</View>
</TouchableComp>
</View>
</View>
{/**
* Edit profile and Settings Buttons **/}
{ userId === loggedInUserId ? (
<View style={{ alignItems: 'flex-start', paddingTop: 10 }}>
<View
style={{ flexDirection: 'row' }}>
<Button
onPress={() => props.navigation.navigate('EditProfile')}
bordered
dark
style={{ flex: 1, marginLeft: 10, marginRight: 10, justifyContent: 'center', height: 30 }}
>
<Text>Edit Profile</Text>
</Button>
</View>
</View>
) : (
<View style={{ flexDirection: 'row', alignItems: 'flex-start', paddingTop: 10 }}>
<TouchableOpacity
style={{ flexDirection: 'row' }}>
<Button
onPress={followUserHandler}
bordered
dark
style={{ flex: 2, marginLeft: 10, marginRight: 10, justifyContent: 'center', height: 30 }}
>
{ checkFollow(currUser._id) ? (
<>
{ isFollowLoading ? (
<ActivityIndicator size="small" color="#fff" />
) : (
<Text style={{ color: 'black' }} >Unfollow</Text>
) }
</>
) : (
<>
{ isFollowLoading ? (
<ActivityIndicator size="small" color="#fff" />
) : (
<Text style={{ color: 'black' }} >Follow</Text>
) }
</>
) }
</Button>
</TouchableOpacity>
</View>
) }
{/**End edit profile**/}
</View>
</View>
<View style={{ paddingBottom: 10, paddingTop: 10 }}>
<View style={{ paddingHorizontal: 10 }} >
<Text style={{ fontWeight: 'bold', fontSize: 18 }}>
{currUser.name + " "}
{
VerifiedUser.verifiedUsersId.includes(currUser._id) && <Octicons name="verified" size={20} color={Colors.brightBlue} />
}
</Text>
{ currUser.about && (
<Text>{currUser.about} </Text>
) }
<Text>{currUser.email}</Text>
</View>
</View>
</View>
<View>
{renderSection()}
</View>
</Content>
</Container >
);
}
Example #18
| Source File: Bookmarks.js From Turbo-Browser with MIT License | 4 votes |
|
Bookmarks = ({ navigation, route }) => {
const styleTypes = ['default','dark-content', 'light-content'];
const [styleStatusBar, setStyleStatusBar] = useState(styleTypes[1]);
const [rippleOverflow, setRippleOverflow] = useState(false);
const [optionsAlertOpen, setOptionsAlertOpen] = useState(false);
const [searchValue, setSearchValue] = useState("");
const [filtereHistoryList, setFiltereHistoryList] = useState([null]);
const [historyValue, setHistoryValue] = useState([null]);
const [searchVisible, setSearchVisible] = useState(false);
const lottieOpacity = useRef(new Animated.Value(1)).current;
const showToast = () => {
ToastAndroid.show("Bookmarks cleared", ToastAndroid.SHORT);
};
const se1 = () => {
navigation.goBack();
}
const se2 = () => {
navigation.navigate('Incognito', { name: "Incognito" });
}
const se3 = () => {
navigation.navigate('Home', { name: "Home" });
}
const se4 = async () => {
try {
await AsyncStorage.removeItem("bookmarksKey");
setHistoryValue([null]);
setTimeout(() => {
Animated.timing(
lottieOpacity,
{
toValue: 0,
duration: 10,
useNativeDriver: true,
}
).start();
setTimeout(() => {
Animated.timing(
lottieOpacity,
{
toValue: 1,
duration: 400,
useNativeDriver: true,
}
).start();
}, 20);
}, 100);
} catch (error) {
// error
}
showToast();
}
const se5 = () => {
setOptionsAlertOpen(true);
}
useEffect(() => {
Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
Keyboard.addListener("keyboardDidHide", _keyboardDidHide);
// cleanup function
return () => {
Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);
};
}, []);
const _keyboardDidShow = () => {
Animated.timing(
lottieOpacity,
{
toValue: 0,
duration: 10,
useNativeDriver: true,
}
).start();
};
const _keyboardDidHide = () => {
setSearchValue("");
setTimeout(() => {
Animated.timing(
lottieOpacity,
{
toValue: 1,
duration: 400,
useNativeDriver: true,
}
).start();
}, 100);
};
function remove_duplicates(arr) {
var obj = {};
var ret_arr = [];
for (var i = 0; i < arr.length; i++) {
obj[arr[i]] = true;
}
for (var key in obj) {
ret_arr.push(key);
}
return ret_arr.filter(Boolean);
}
function filterByValue(array, string) {
return array.filter(element => element.includes(string.toLowerCase()));
}
const getHistoryValue = async () => {
try {
const value = await AsyncStorage.getItem("bookmarksKey");
if(value !== null) {
setHistoryValue(remove_duplicates(value.split("~")));
}
} catch(error) {
// error
}
}
useEffect(() => {
navigation.addListener('focus',
() => {
getHistoryValue();
}
);
}, []);
const openWebsite = (url) => {
navigation.navigate('Search', { name: `turbo/${url}` });
}
const searchSubmitted = (searchString) => {
setSearchVisible(false);
}
useEffect(() => {
setSearchValue(searchValue);
if(historyValue[0] !== null) {
setFiltereHistoryList(filterByValue(historyValue, searchValue));
}
// setFiltereHistoryList(filterByValue(historyValue, searchValue));
}, [searchValue]);
const onSearchChangeText = async (text) => {
setSearchValue(text);
}
return (
<SafeAreaView>
<StatusBar backgroundColor="#ffffff" barStyle={styleStatusBar} />
<Modal
isOpen={optionsAlertOpen}
onClosed={() => {setOptionsAlertOpen(false)}}
style={[styles.modal, styles.modal8]}
position={"bottom"}
backdropPressToClose={true}
swipeToClose={false}
backdropOpacity={0.2}
backButtonClose={true}
coverScreen={true}
animationDuration={200}
>
<View style={styles.optionAlertCont_MAIN}>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
navigation.navigate('History', { name: "History" });
}}>
<Text style={styles.optionAlertCont_optText_1}>
History
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
navigation.navigate('Settings', { name: "Bookmarks" });
}}>
<Text style={styles.optionAlertCont_optText_1}>
Settings
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1}>
<TouchableOpacity onPress={() => {
setOptionsAlertOpen(false);
navigation.navigate('Help', { name: "Bookmarks" });
}}>
<Text style={styles.optionAlertCont_optText_1}>
FAQs
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_1_B}>
<TouchableOpacity onPress={() => {
BackHandler.exitApp();
}}>
<Text style={styles.optionAlertCont_optText_1}>
Exit App
</Text>
</TouchableOpacity>
</View>
<View style={styles.optionAlertCont_opt_icon_1}>
<TouchableOpacity style={{
width: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
paddingBottom: 10,
marginBottom: 4,
}} onPress={() => {setOptionsAlertOpen(false)}}>
{/* <FontAwesome style={styles.optionAlertCont_opt_icon_2} name="chevron-down"/> */}
<Image
source={require("../assets/arrowDown2.png")}
style={{
height: 26,
width: 26,
}}
/>
</TouchableOpacity>
</View>
</View>
</Modal>
<View style={styles.historyMainContainer}>
<View style={styles.history_title_1}>
{
searchVisible ?
<>
<View style={styles.history1_INPUT_C}>
<TextInput
style={{
color: "#767474FE",
fontSize: 16,
fontFamily: "Helvetica",
marginLeft: 20,
flexGrow: 1,
marginTop: -10,
paddingTop: -10,
marginBottom: -10,
paddingBottom: -10,
maxWidth: 240,
}}
value={searchValue}
onChangeText={(text) => onSearchChangeText(text)}
autoFocus={true}
editable={searchVisible}
onSubmitEditing={() => {searchSubmitted(searchValue)}}
placeholderTextColor="#CECFCFFF"
placeholder="Search Bookmarks"
/>
</View>
</>
:
<>
<TouchableOpacity onPress={() => {navigation.goBack()}}>
<View style={styles.history1_AA}>
<IonicIcon name="arrow-back" style={styles.history_title_1A_icon}/>
</View>
</TouchableOpacity>
<View style={styles.history1_BB}>
<Text style={styles.history_title_1B_txt}>Bookmarks</Text>
</View>
</>
}
{
searchVisible ?
<>
<TouchableOpacity onPress={() => {
setSearchVisible(!searchVisible);
}}>
<View style={styles.history1_CC}>
<IonicIcon name="close" style={styles.history_title_1C_icon}/>
</View>
</TouchableOpacity>
</>
:
<>
<TouchableOpacity onPress={() => {
setSearchVisible(!searchVisible);
}}>
<View style={styles.history1_CC}>
<IonicIcon name="search" style={styles.history_title_1C_icon}/>
</View>
</TouchableOpacity>
</>
}
</View>
<LinearGradient colors={['#EDEEEEFE', '#FFFFFFFF']} style={styles.linearGradient_1}></LinearGradient>
<View style={styles.history_style_2}>
{
searchVisible ?
<>
{
filtereHistoryList.map((value, index) => {
return (
<View style={styles.his_s22_A} key={index}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#BBB9B9FE", rippleOverflow)}
onPress={() => {
openWebsite(value);
}}
>
<View style={styles.his_s22_B}>
<Text style={styles.his_s22_C_TXT}>{value}</Text>
</View>
</TouchableNativeFeedback>
</View>
)
})
}
</>
:
<>
{
historyValue[0] == null ?
<>
<View style={styles.lottieViewContainer}>
<Animated.View
style={{
opacity: lottieOpacity
}}
>
<LottieView
style={styles.lottieAnimation}
source={require('../assets/629-empty-box.json')}
autoSize={true}
autoPlay
loop
/>
<Text style={styles.lottieText}>Your bookmarks appear here</Text>
</Animated.View>
</View>
</>
:
<>
{
historyValue.map((value, index) => {
return (
<View style={styles.his_s22_A} key={index}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#BBB9B9FE", rippleOverflow)}
onPress={() => {
openWebsite(value);
}}
>
<View style={styles.his_s22_B}>
<Text style={styles.his_s22_C_TXT}>{value}</Text>
</View>
</TouchableNativeFeedback>
</View>
)
})
}
</>
}
</>
}
</View>
<View style={styles.history_style_3}>
<TouchableOpacity onPress={se1} style={styles.sea_3_item}>
<View>
<IonicIcon style={styles.sea3__3_icon} name="arrow-back"/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={se2} style={styles.sea_3_item}>
<View style={{
display: "flex",
alignItems: "center",
}}>
<Image style={styles.sea3__3_icon_img} source={require("../assets/incognito.png")} />
</View>
</TouchableOpacity>
<TouchableOpacity onPress={se3} style={styles.sea_3_item}>
<View>
<IonicIcon style={styles.sea3__3_icon} name="home-outline"/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={se4} style={styles.sea_3_item}>
<View>
<IonicIcon style={styles.sea3__3_icon} name="trash-outline"/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={se5} style={styles.sea_3_item}>
<View>
<IonicIcon style={styles.sea3__3_icon} name="grid-outline"/>
</View>
</TouchableOpacity>
</View>
</View>
</SafeAreaView>
);
}
Example #19
| Source File: NativeButton.js From the-eye-knows-the-garbage with MIT License | 4 votes |
|
NativeButton = createReactClass({
propTypes: {
// Extract parent props
...TouchableWithoutFeedback.propTypes,
textStyle: PropTypes.any,
disabledStyle: PropTypes.any,
children: PropTypes.node.isRequired,
underlayColor: PropTypes.string,
background: PropTypes.any,
},
statics: {
isAndroid: (Platform.OS === 'android'),
},
getDefaultProps: function () {
return {
textStyle: null,
disabledStyle: null,
underlayColor: null,
};
},
_renderText: function () {
// If children is not a string don't wrapp it in a Text component
if (typeof this.props.children !== 'string') {
return this.props.children;
}
return (
<Text numberOfLines={1} ellipsizeMode={Platform.OS === 'ios' ? 'clip' : 'tail'} style={[styles.textButton, this.props.textStyle]}>
{this.props.children}
</Text>
);
},
render: function () {
const disabledStyle = this.props.disabled ? (this.props.disabledStyle || styles.opacity) : {};
// Extract Button props
let buttonProps = {
accessibilityComponentType: this.props.accessibilityComponentType,
accessibilityTraits: this.props.accessibilityTraits,
accessible: this.props.accessible,
delayLongPress: this.props.delayLongPress,
delayPressIn: this.props.delayPressIn,
delayPressOut: this.props.delayPressOut,
disabled: this.props.disabled,
hitSlop: this.props.hitSlop,
onLayout: this.props.onLayout,
onPress: this.props.onPress,
onPressIn: this.props.onPressIn,
onPressOut: this.props.onPressOut,
onLongPress: this.props.onLongPress,
pressRetentionOffset: this.props.pressRetentionOffset,
};
// Render Native Android Button
if (NativeButton.isAndroid) {
buttonProps = Object.assign(buttonProps, {
background: this.props.background || TouchableNativeFeedback.SelectableBackground(),
});
return (
<TouchableNativeFeedback
{...buttonProps}>
<View style={[styles.button, this.props.style, disabledStyle]}>
{this._renderText()}
</View>
</TouchableNativeFeedback>
);
}
// Render default button
return (
<TouchableHighlight
{...buttonProps}
style={[styles.button, this.props.style, disabledStyle]}
underlayColor={this.props.underlayColor}>
{this._renderText()}
</TouchableHighlight>
);
}
})
